2016-10-16 21 views
0

モジュールローダとしてAngular2、TypeScript、およびSystemJSを使用します。私はSystemJsを主にここで使用して、デバッグのためにファイルをそのままの状態に保ちます。基本的には動作しますが、コンポーネントの読み込みに問題があります。私はここでいくつかの答えを読んだが、匹敵するものは見つけられなかっSystemJSを使用してTypeScriptコンポーネントからフォルダをインポート

私は私のアプリのために、この構造を持っている:

Folder Structure

をコンポーネントフォルダ内の "index.d.ts" を注意してください。その理由は、app.tsファイルに簡単に簡略化され、インポートされているが、このように書きます:

import * as cmp from './Components'; 

フォルダはすべて私のコンポーネントとこのようになります「index.d.ts」が含まれています

export * from './shop-root'; 
export * from './shop-catalogs'; 
export * from './shop-edit-cat'; 
export * from './shop-about'; 
export * from './shop-contact'; 

私はその後、(@NgModuleから抜粋)、このように私のコンポーネントを使用しない:

declarations: [ 
    cmp.ShopRootComponent, 
    cmp.ShopCatalogs, 
    cmp.ShopEditCat, 
    cmp.ShopAbout, 
    cmp.ShopContact 
] 

typescriptですの観点から、これは正常に動作し、ここでは何の問題。マイtypescriptですコンパイラは幸せであるとインポートが含まれている「app.js」ファイルを作成します。

var cmp = require('./Components'); 

SystemJSが、それはフォルダのロード失敗ロードを開始します。

Loading of a folder fails

私は、単一のファイルを使用する場合すべてが完璧に動作します。したがって、すべての基本パスなどは正しいです。

しかし、最終的に何百ものコンポーネントがあると、1つのファイルのロードによってTypeScriptコードが乱雑になると思います。

WebPackまたは他のローダーの使用は答えではありません。私が直面している問題は、見栄えの良いTypeScriptファイルの作成が改善され、コンパイルされたJavaScriptがデバッグ(と学習)に便利です。

は現在System.config.jsは、次のようになります。

(function (global) { 
    System.config({ 
     paths: { 
      // paths serve as alias 
      'npm:': 'assets/js/lib/' 
     }, 
     // map tells the System loader where to look for things 
     map: { 
      // our app is within the app folder 
      app: 'assets/js/app', 
      // angular bundles 
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
      // other libraries 
      'rxjs': 'npm:rxjs', 
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: './app.js', 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      }, 
      'angular-in-memory-web-api': { 
       main: './index.js', 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this); 

を繰り返しますが、この設定は完璧に働いているように、単一のファイルにrefererredコンポーネント用。私はSystemJSを使用してフォルダ/ディレクトリからコンポーネントをロードするにはどうすればよい

質問

?私はそれが主にSystemJsの設定上の問題だと思うが、設定を見つけることができない。

答えて

0

index.d.ts

+0

index.tsのおかげでたくさんの名前を変更してください。 TSコンパイラのこの動作を認識していませんでした。加えて: '*/cmponents'からimport * as cmp; './Components/index'からcmpとしてimport *に変更する必要があります。 TSは気にしませんが、SystemJSは満足しています。 –

関連する問題