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