Angular CLI终极参考指南
如果翻译内容对你产品困扰，可查看原文The Ultimate Angular CLI Reference Guide
构建项目
开发期间运行ng serve，会在虚拟文件系统中自动构建打包Angular应用。
当你准备发布应用到生产，你需要真实的文件部署到服务器或云上。
构建打包应用用于部署，可运行：
$ ng build
命令将输出以下内容到控制台：
3656ms building modules
Hash: 69fb9d88c4f502e01790
Version: webpack 2.1.0-beta.25
Time: 6457ms
Asset Size Chunks Chunk Names
main.bundle.js 2.54 MB 0, 2 [emitted] main
styles.bundle.js 10.2 kB 1, 2 [emitted] styles
inline.js 5.53 kB 2 [emitted] inline
main.map 2.57 MB 0, 2 [emitted] main
styles.map 14.1 kB 1, 2 [emitted] styles
inline.map 5.59 kB 2 [emitted] inline
index.html 472 bytes [emitted]
assets/.npmignore 0 bytes [emitted]
chunk {0} main.bundle.js, main.map (main) 2.03 MB {1} [initial] [rendered]
chunk {1} styles.bundle.js, styles.map (styles) 9.96 kB {2} [initial] [rendered]
chunk {2} inline.js, inline.map (inline) 0 bytes [entry] [rendered]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 2.81 kB 0
chunk {0} index.html 339 bytes [entry] [rendered]
这条命令做了什么？
- AngularCLI从angular-cli.json文件中加载配置。
- AngularCLI运行webpack构建打包Javascript和CSS代码。
- 输出结果到AngularCLI配置中指定的目录下，默认目录是dist。
可选参数
- --aot：预编译（可查看章节future features）。
- --base-href:string,设置index.html文件中的base href参数。
- --environment:string,默认dev，在哪个环境中使用。
- --output-path:string,文件输出目标路径。
- --target:string,默认development，在哪个环境中使用。
- --watch:boolean,默认false，监听文件变化，当监听到文件变化的时候，重新构建
target
指定的target会影响到构建进程操作，允许值如下所示：
- development:默认值，不压缩混淆
- production:压缩混淆代码
构建生产环节代码：
$ ng build --target=production
构建出几个boundl文件，以及压缩、混淆并在文件名中添加了hash值
3596ms building modules
Hash: 3d5ff21d335b08426087
Version: webpack 2.1.0-beta.25
Time: 9643ms
Asset Size Chunks Chunk Names
main.a8db3859286ec456f5d8.bundle.js 825 kB 0, 2 [emitted] main
styles.b52d2076048963e7cbfd.bundle.js 3.97 kB 1, 2 [emitted] styles
inline.js 1.39 kB 2 [emitted] inline
main.a8db3859286ec456f5d8.bundle.js.gz 187 kB [emitted]
index.html 514 bytes [emitted]
assets/.npmignore 0 bytes [emitted]
chunk {0} main.a8db3859286ec456f5d8.bundle.js (main) 2.03 MB {1} [initial] [rendered]
chunk {1} styles.b52d2076048963e7cbfd.bundle.js (styles) 9.96 kB {2} [initial] [rendered]
chunk {2} inline.js (inline) 0 bytes [entry] [rendered]
target环境
通过环境你可以指定相应定制的应用环境设置
你可以在angular-cli.json文件中自定义环境。默认为：
- source:使用environments/environment.ts中定义的设置。
- dev: 使用environments/environment.ts中定义的设置。
- prod:使用environments/environment.ts中定义的设置。
environments/environment.ts文件等同于：
export const environment = {
production: false
};
environments/environment.prod.ts文件等同于：
export const environment = {
production: true
};
构建进程默认使用dev环境。
如果你指定了其他的环境，构建进程将使用相应的环境：
Uses environments/environment.ts
$ ng build
Also uses environments/environment.ts
$ ng build --environment=dev
Uses environments/environment.prod.ts
$ ng build --environment=prod
就像在src/main.ts一样，你可以通过引入environments/environment来获取environment 设置：
import './polyfills.ts';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
构建进程会确保你import的环境是正确的。
部署项目
当你准备部署项目，你可以使用AngularCLI将项目部署到主机供应商上。
目前AngularCLI只支持GitHub Pages:
$ ng github-pages:deploy
这条命令做了什么？
- 应用程序按照生产模式构建打包（生产target+生产environment）。
- 结果输出到dist目录。
- 在你的Git仓库下创建gh-pages分支，与GitHub要求的文件与布局相一致。
- 产生一条Git commit。
- commit pushed到Github上。
如果你的Git仓库有没关联远程GitHub仓库，AngularCLI将会给你必要的提示。
可选参数
- --message:string,构建的时候提交的message，必须写在引号中。
- --target:string,默认development,使用的环境
- --user-page:boolean,默认false,是否以user/org页面部署到GitHub上
- --skip-build:boolean,默认false,跳过构建直接部署
- --gh-token:string,使用Github的token
- --gh-username:string,使用Github用户名
- --base-href:string,在index.html文件中使用的base href值
未来将增加支持其他主机供应商（hosting providers）
