angular 手动编译_Angular2 AoT编译以及Rollup摇树优化
最新版本的angular-cli中已经支持摇树优化，命令:
ng serve --prod --aot
这篇文章已经过时
1.先使用Angular-cli生成一个新的项目
ng new angular2-aot-rollup-seed
2.创建完成之后，会自动生成一个根模块AppModule，为了说明问题，使用
ng g module HomeModule
ng g component HomeComponent
生成一个新的Home模块，并且生成一个新的Home组件
3.配置路由
AppModule中的路由配置如下：
const appRoutes: Routes = [
{ path: 'home',loadChildren:'app/home/home.module#HomeModule' },
];
然后需要在imports中使用 RouterModule.forRoot(appRoutes)导入进来。这里配置了异步加载的方式去加载HomeModule
HomeModule中的路由配置如下：
const homeRoutes: Routes = [
{ path: '',component:HomeComponent },
];
上面都是基础配置，配置完成之后，使用ng serve测试能够正常启动。
4.下面开始进行AoT编译部分，先复制tsconfig.json文件，并重命名为tsconfig-aot.json，然后修改为以下内容：
{
"compilerOptions": {
"baseUrl": "",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es2015", "dom"],
"mapRoot": "./",
"module": "es2015",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es2015",
"typeRoots": [
"../node_modules/@types"
]
},
"files": [
"app/app.module.ts",
"app/home/home.module.ts"
"main.ts"
],
"angularCompilerOptions": {
"genDir": "aot",
"skipMetadataEmit" : true
}
}
然后使用angular的ngc编译器，进行AoT编译，AoT编译需要先安装angular提供的ngc插件，
npm install rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-uglify --save-dev
之后可以使用以下命令来编译
node_modules/.bin/ngc -p tsconfig-aot.json
windows下，使用以下命令
"node_modules/.bin/ngc" -p tsconfig-aot.json
之后会在和app目录同级的目录下生成一个aot文件夹，里面的内容就是我们编译完成的结果。
5.Rollup，使用以下命令安装rollup插件
npm install rollup rollup-plugin-node-resolve rollup-plugin-commonjs rollup-plugin-uglify --save-dev
然后复制main.ts，并且重命名为main-aot.ts，将内容修改如下：
import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from './aot/app/app.module.ngfactory';
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
然后使用rollup命令进行摇树优化
node_modules/.bin/rollup -c rollup-config.js
之后你就可以在项目根目录下的dist目录下看到生成了一个build.js的文件。这个就是我们rollup之后的结果。
6.下面说遇到的问题
a).提示System.import is not function
这个是因为我在app模块的路由中，使用了loadChildren配置，这个配置里头，angular就会使用System去下载模块代码，所以需要在index.html中加上system.js文件，这个在官方的例子中不需要，因为没有用到异步加载路由。
b).require is undefined
这个不记得了，记得了再加上
c).can not find home.module.ngfactory
这个是因为你使用了loadChildren来加载home模块，但是在AoT编译的时候，是不会生成home模块的文件的，所以我就在app模块中，手动导入了Home模块，这个时候进行AoT编译的时候就生成了home.module.ngfactory文件了
然后重新rollup，生成的build.js就是可用了，应用正常启动了，访问/home能够看到home works！的提示，控制台无错误。
项目我已经放在github上了，有兴趣的可以看看