Angular2 项目构建及运行过程

1、安装npm，git等

2、创建angular2项目    ng  new   my-app

3、在项目中添加Component 或者 Service  ng g component/service

4、编译并运行  ng  serve --port 4201

5、单元测试 ng test

6、打包发布：ng build  --prod  --aot

知识点：

1、Angular CLI 基于Amber和Webpack，是Angular2的标准构建工具

    Amber的构建能力：目录结构、模块关系等的创建

    Webpack的调试、测试、打包能力

2、Angular2项目文件作用

    --packgae.json   包含所有应用的类库

    --angular.json    配置编译过程中使用的路径，依赖关系，图标样式、环境信息等

    --e2e  测试目录

    --node-module 依赖库的位置

    --src  实际项目目录

3、Angular2项目的入口数据走向

入口文件是：main.ts

它调用了app/app.module中的AppModule

由此启动第一个组件AppComponment

4、Ng build 优化

1、预编译技术   --aot

    压缩了Angular框架代码，将需要解释--执行的代码，变为可以直接执行的代码，实现按需加载，达到优化的目的

2、生产模式

    ng build 默认是在开发模式下打包代码，有大量的Debug开关，开发调试，打印输出等不必要的代码；

    生成模式去掉冗余代码，合并公用文件，减少了请求的次数和体积，提高效率；使用哈希码标记文件，减少由CDN更新引发的引用错误；并压缩文件，从而达到优化目的。

Angular2 项目构建及运行过程

1、安装npm，git等

2、创建angular2项目    ng  new   my-app

3、在项目中添加Component 或者 Service  ng g component/service

4、编译并运行  ng  serve --port 4201

5、单元测试 ng test

6、打包发布：ng build  --prod  --aot

知识点：

1、Angular CLI 基于Amber和Webpack，是Angular2的标准构建工具

    Amber的构建能力：目录结构、模块关系等的创建

    Webpack的调试、测试、打包能力

2、Angular2项目文件作用

    --packgae.json   包含所有应用的类库

    --angular.json    配置编译过程中使用的路径，依赖关系，图标样式、环境信息等

    --e2e  测试目录

    --node-module 依赖库的位置

    --src  实际项目目录

3、Angular2项目的入口数据走向

入口文件是：main.ts

它调用了app/app.module中的AppModule

由此启动第一个组件AppComponment

4、Ng build 优化

1、预编译技术   --aot

    压缩了Angular框架代码，将需要解释--执行的代码，变为可以直接执行的代码，实现按需加载，达到优化的目的

2、生产模式

    ng build 默认是在开发模式下打包代码，有大量的Debug开关，开发调试，打印输出等不必要的代码；

    生成模式去掉冗余代码，合并公用文件，减少了请求的次数和体积，提高效率；使用哈希码标记文件，减少由CDN更新引发的引用错误；并压缩文件，从而达到优化目的。