私はこの記事を読む - http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/と私は最初のステップSimple build with minification.を私のアプリケーションに含めたいと思っています。私はこれまでのところ、このようにそれを設定している：私のケースでは、アングル2のアプリケーションをプロダクション用にバンドルするにはどうすればいいですか？
system.config.js
{
"compilerOptions": {
"target": "ES5",
"module": "CommonJS",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"inlineSourceMap": false,
"inlineSources": false,
"outDir": "js"
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
],
"compileOnSave": true
}
(function (global) {
System.config({
paths: {
'npm:': 'node_modules/'
},
map: {
app: 'js',
// 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/router/upgrade': 'npm:@angular/router/bundles/router-upgrade.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
'@angular/upgrade/static': 'npm:@angular/upgrade/bundles/upgrade-static.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
'@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js'
},
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
primeng: {
defaultExtension: 'js'
}
}
});
})(this);
index.htmlを
<script src="systemjs.config.js"></script>
<script src="app.config.js"></script>
<script>
System.import('app').then(
function(module) {
return module.start(appConfig, messagePropsData);
}).catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
を
main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { ValueProvider } from '@angular/core';
import { AppModule } from './app.module';
import { AppConfig, APP_CONFIG, CONFIG_PROVIDER } from './app.config';
export function start(config: any) {
CONFIG_PROVIDER.provider = { provide:APP_CONFIG, useValue: config }
return platformBrowserDynamic([CONFIG_PROVIDER.provider]).bootstrapModule(AppModule);
}
私は.tsファイルから"start": "tsc && concurrently \"tsc -w\" \"lite-server\" "すべての私の生成.jsファイルはjsディレクトリに作成され、このコマンドを使用して作業するときあなたが見ることができるように。今度は記事のbuild_prodコマンドを使用して（jsディレクトリのofcourseに変更する）、そのディレクトリにバンドルとミニバンドルを作成します。問題は、私がそのディレクトリにあるmain.jsファイルを探すように私のアプリに指示したことです。同梱のファイルにはmain.jsという名前を付けたくありません（app.bundle.minified.jsはかなり良いです）。 jsディレクトリとバンドルされたファイルだけを置く）ので、起動するためにはapp.bundle.minified.jsファイルを探してからapp.bundle.jsファイルを探し、その後はmain.jsを探してください。
基本的には、バンドルされたミニバージョンで起動することをアプリに許可しませんでした。そのバージョンが見つからない場合は、main.jsファイルで開始する必要があります。 system.config.jsとindex.htmlで何を変更する必要がありますか？これどうやってするの？
ng2が最初に出たとき、私はsystem.jsを使用しましたが、今度はかなり信頼できるangular-cliに移動しました。 angular-cliは、angular2（esp AOTコンパイル）を使用した開発や生産作業を簡単にするために作られました。私は、あなたが角度cliに移動することをお勧めします。 – brando