モジュールローダとしてAngular2、TypeScript、およびSystemJSを使用します。私はSystemJsを主にここで使用して、デバッグのためにファイルをそのままの状態に保ちます。基本的には動作しますが、コンポーネントの読み込みに問題があります。私はここでいくつかの答えを読んだが、匹敵するものは見つけられなかっSystemJSを使用してTypeScriptコンポーネントからフォルダをインポート
私は私のアプリのために、この構造を持っている:
をコンポーネントフォルダ内の "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が、それはフォルダのロード失敗ロードを開始します。
私は、単一のファイルを使用する場合すべてが完璧に動作します。したがって、すべての基本パスなどは正しいです。
しかし、最終的に何百ものコンポーネントがあると、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の設定上の問題だと思うが、設定を見つけることができない。
index.ts
のおかげでたくさんの名前を変更してください。 TSコンパイラのこの動作を認識していませんでした。加えて: '*/cmponents'からimport * as cmp; './Components/index'からcmpとしてimport *に変更する必要があります。 TSは気にしませんが、SystemJSは満足しています。 –