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

你可能感兴趣的:(angular,手动编译)