Angular CLI - ng build 命令
本章通过示例解释了 ng build 命令的语法、参数和选项。
语法
ng build 命令语法如下 −
ng build <project> [options] ng b <project> [options]
ng build 命令将 Angular 应用程序/库编译到给定路径下名为 dist 的输出目录中。
参数
ng build 命令参数如下 −
| 序号 | 参数 & 语法 | 说明 |
|---|---|---|
| 1 | <project> | 要构建的应用程序或库的名称。 |
选项
Options 是可选参数。
| 序号 | 选项 & 语法 | 说明 |
|---|---|---|
| 1 | --aot=true|false |
使用提前编译进行构建。 默认值： false。 |
| 2 | --baseHref=baseHref | 正在构建的应用程序的基本 URL。 |
| 3 | --buildEventLog=buildEventLog | 构建事件协议事件的实验输出文件路径。 |
| 4 | --buildOptimizer=true|false | 使用"aot"选项时启用"@angular-devkit/build-optimizer"优化。 默认值： false。 |
| 5 | --commonChunk=true|false |
使用包含跨多个包使用的代码的单独包。 默认值： false。 |
| 6 | --configuration=configuration | 命名的构建目标，如 angular.json 的"配置"部分中所指定。 每个命名目标都附有该目标的选项默认配置。 显式设置此选项会覆盖"--prod"标志。 别名： -c. |
| 7 | --crossOrigin=none|anonymous|use-credentials |
定义提供 CORS 支持的元素的跨域属性设置。 默认值：none |
| 8 | --deleteOutputPath=true|false |
构建前删除输出路径。 默认值：true。 |
| 9 | --deployUrl=deployUrl | 将部署文件的 URL。 |
| 10 | --experimentalRollupPass=true|false |
在使用 Webpack 捆绑模块之前，使用 Rollup 连接模块。 默认值： false。 |
| 11 | --extractCss=true|false |
将全局样式中的 css 提取到 css 文件中，而不是 js 文件中。 默认值： false。 |
| 12 | --extractLicenses=true|false |
将所有许可证提取到一个单独的文件中。 默认值： false。 |
| 13 | --forkTypeChecker=true|false |
在分叉进程中运行 TypeScript 类型检查器。 默认值：true。 |
| 14 | --help=true|false|json|JSON |
在控制台中显示此命令的帮助消息。 默认值： false。 |
| 15 | --i18nMissingTranslation=warning|error|ignore |
如何处理 i18n 缺失的翻译。 默认值：warning |
| 16 | --index=index | 配置应用程序 HTML 索引的生成。 |
| 17 | --localize=true|false | |
| 18 | --main=main | 应用程序主入口点相对于当前工作区的完整路径。 |
| 19 | --namedChunks=true|false |
使用延迟加载块的文件名。 默认值：true。 |
| 20 | --ngswConfigPath=ngswConfigPath | ngsw-config.json 的路径。 |
| 21 | --optimization=true|false | 启用构建输出的优化。 |
| 22 | --outputHashing=none|all|media|bundles |
定义输出文件名缓存清除哈希模式。 默认值：none |
| 23 | --outputPath=outputPath | 新输出目录相对于当前工作空间的完整路径。 默认情况下，将输出写入当前项目中名为 dist/ 的文件夹。 |
| 24 | --poll | 启用并定义文件监视轮询时间段（以毫秒为单位）。 |
| 25 | --polyfills=polyfills | polyfills 文件相对于当前工作空间的完整路径。 |
| 26 | --preserveSymlinks=true|false |
解析模块时不要使用真实路径。 默认值： false。 |
| 27 | --prod=true|false | “--configuration=Production”的简写。 如果为 true，则将构建配置设置为生产目标。 默认情况下，生产目标是在工作区配置中设置的。 |
| 28 | --progress=true|false |
构建时将进度记录到控制台。 默认值：true。 |
| 27 | --resourcesOutputPath=resourcesOutputPath | 样式资源放置的路径，相对于outputPath。 |
| 28 | --serviceWorker=true|false |
为生产构建生成服务工作线程配置。 默认值： false。 |
| 29 | --showCircularDependencies=true|false |
在构建上显示循环依赖警告。 默认值：true。 |
| 30 | --sourceMap=true|false |
输出 sourceMap。 默认值：true。 |
| 31 | --statsJson=true|false |
生成一个"stats.json"文件，可以使用"webpack-bundle-analyzer"等工具进行分析。 默认值： false。 |
| 32 | --subresourceIntegrity=true|false |
启用子资源完整性验证。 默认值： false。 |
| 33 | --tsConfig=tsConfig | TypeScript 配置文件相对于当前工作区的完整路径。 |
| 34 | --vendorChunk=true|false |
使用仅包含 vendor 库的单独捆绑包。 默认值：true。 |
| 35 | --verbose=true|false |
向输出日志记录添加更多详细信息。 默认值：true。 |
| 36 | --watch=true|false |
当文件更改时运行构建。 默认值： false。 |
| 37 | --webWorkerTsConfig=webWorkerTsConfig | Web Worker 模块的 TypeScript 配置。 |
首先，移动到使用 nggenerate 命令更新的 Angular 项目。 将 app.component.html 的内容替换为以下内容，然后运行命令。 本章可在 https://www.w3ccoo.com/angular_cli/angular_cli_ng_generate.html 处找到。
<app-goals></app-goals> <router-outlet></router-outlet>
示例
下面给出了 ng build 命令的示例 −
\>Node\>TutorialsPoint> ng build
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 12.4 kB [initial] [rendered]
chunk {styles} styles-es5.js, styles-es5.js.map (styles) 13.9 kB [initial] [rendered]
chunk {main} main-es2015.js, main-es2015.js.map (main) 61.4 kB [initial] [rendered]
chunk {main} main-es5.js, main-es5.js.map (main) 65 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 656 kB [initial] [rendered]
chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 2.67 MB [initial] [rendered]
chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 3.11 MB [initial] [rendered]
Date: 2020-06-04T01:31:35.612Z - Hash: d5fd9371cdc40ae353bc - Time: 210494ms
这里 ng build 命令已成功构建我们的项目 TutorialsPoint。
