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之后的结果。

---

上面的部分说的非常简单，因为这些在angular的官方网站都有。地址：
https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#compile

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上了，有兴趣的可以看看

https://github.com/zhongzhong0505/angular-aot-rollup-seed