Angular CLI - ng build 命令

本章通过示例解释了 ng build 命令的语法、参数和选项。

句法

ng build 命令的语法如下 -

ng build <project> [options]
ng b <project> [options]

ng build 命令将 Angular 应用程序/库编译到给定路径下名为 dist 的输出目录中。

论点

ng build 命令的参数如下 -

先生。 参数和语法 描述
1 <项目> 要构建的应用程序或库的名称。

选项

选项是可选参数。

先生。 选项和语法 描述
1 --aot=真|假

使用提前编译进行构建。

默认值：假。
2 --baseHref=baseHref 正在构建的应用程序的基本 url。
3 --buildEventLog=buildEventLog 实验 构建事件协议事件的输出文件路径。
4 --buildOptimizer=true|false

使用“aot”选项时启用“@angular-devkit/build-optimizer”优化。

默认值：假。
5 --commonChunk=true|false

使用包含跨多个包使用的代码的单独包。

默认值：假。
6 --configuration=配置

命名的构建目标，如 angular.json 的“配置”部分中所指定。每个命名目标都附有该目标的选项默认配置。显式设置此选项会覆盖“--prod”标志。

别名：-c.
7 --crossOrigin=none|匿名|使用凭证

定义提供 CORS 支持的元素的跨域属性设置。

默认值：无。
8 --deleteOutputPath=true|false

构建之前删除输出路径。

默认值：true。
9 --deployUrl=deployUrl 将部署文件的 URL。
10 --experimentalRollupPass=true|false

在使用 Webpack 捆绑模块之前，使用 Rollup 连接模块。

默认值：假。
11 --extractCss=true|false

将全局样式中的 css 提取到 css 文件中，而不是 js 文件中。

默认值：假。
12 --extractLicenses=true|false

将所有许可证提取到单独的文件中。

默认值：假。
13 --forkTypeChecker=true|false

在分叉进程中运行 TypeScript 类型检查器。

默认值：true。
14 --help=true|false|json|JSON

在控制台中显示此命令的帮助消息。

默认值：假。
15 --i18nMissingTranslation=警告|错误|忽略

如何处理 i18n 缺失的翻译。

默认值：警告。
16 --索引=索引 配置应用程序 HTML 索引的生成。
17 号 --localize=true|false  
18 --主=主 应用程序主入口点相对于当前工作区的完整路径。
19 --namedChunks=true|false

使用延迟加载块的文件名。

默认值：true。
20 --ngswConfigPath=ngswConfigPath ngsw-config.json 的路径。
21 --优化=true|false 启用构建输出的优化。
22 --outputHashing=无|所有|媒体|捆绑

定义输出文件名缓存破坏哈希模式。

默认值：无。
23 --outputPath=输出路径 新输出目录相对于当前工作空间的完整路径。默认情况下，将输出写入当前项目中名为 dist/ 的文件夹。
24 - 轮询 启用并定义文件监视轮询时间段（以毫秒为单位）。
25 --polyfills=polyfills Polyfills 文件相对于当前工作空间的完整路径。
26 --preserveSymlinks=true|false

解析模块时不要使用真实路径。

默认值：假。
27 --prod=真|假 “--configuration=生产”的简写。如果为 true，则将构建配置设置为生产目标。默认情况下，生产目标是在工作区配置中设置的，以便所有构建都利用捆绑、有限的树摇动以及有限的死代码消除。
28 --进度=真|假

构建时将进度记录到控制台。

默认值：true。
27 --resourcesOutputPath=资源输出路径 样式资源放置的路径，相对于outputPath。
28 --serviceWorker=true|false

为生产构建生成服务工作线程配置。

默认值：假。
29 --showCircularDependency=true|false

显示构建上的循环依赖警告。

默认值：true。
30 --sourceMap=true|false

输出源图。

默认值：true。
31 --statsJson=true|false

生成一个“stats.json”文件，可以使用“webpack-bundle-analyzer”等工具进行分析。

默认值：假。
32 --subresourceIntegrity=true|false

启用子资源完整性验证的使用。

默认值：假。
33 --tsConfig=tsConfig TypeScript 配置文件相对于当前工作区的完整路径。
34 --vendorChunk=true|false

使用仅包含供应商库的单独捆绑包。

默认值：true。
35 --verbose=true|false

向输出日志记录添加更多详细信息。

默认值：true。
36 --watch=true|false

当文件更改时运行构建。

默认值：假。
37 --webWorkerTsConfig=webWorkerTsConfig Web Worker 模块的 TypeScript 配置。

首先，移动到使用nggenerate命令更新的 Angular 项目。将 app.component.html 的内容替换为以下内容，然后运行命令。本章可从https://www.tutorialspoint.com/angular_cli/angular_cli_ng_generate.htm 获取。

<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。