Angular CLI教程

Angular CLI ng build 命令

本章解释了 ng build 命令的语法、参数和选项以及一个例子。

语法

ng build 命令的语法如下-
ng build <project> [options]
ng b <project> [options]
ng build 命令将 angular 应用程序/库编译到给定路径下名为 dist 的输出目录中。

参数

ng build 命令的参数如下-
参数和语法 描述
<project> 要构建的应用程序或库的名称。

选项

选项是可选参数。
选项和语法 描述
--aot=true|false
使用提前编译进行构建。
默认值:false。
--baseHref=baseHref 正在构建的应用程序的基本 URL。
--buildEventLog=buildEventLog 实验性构建事件协议事件的输出文件路径。
--buildOptimizer=true|false
在使用"aot"选项时启用"@angular-devkit/build-optimizer"优化。
默认值:false。
--commonChunk=true|false
使用包含跨多个包使用的代码的单独包。
默认值:false。
--configuration=configuration
一个命名的构建目标,在 angular.json 的"配置"部分中指定。每个命名的目标都伴随着该目标的选项默认配置。明确设置此项会覆盖"--prod"标志。
别名:-c。
--crossOrigin=none|anonymous|use-credentials
定义提供CORS支持的元素的crossorigin属性设置。
默认:无。
--deleteOutputPath=true|false
在构建前删除输出路径。
默认:true。
--deployUrl=deployUrl 将部署文件的 URL。
--experimentalRollupPass=true|false
在使用 Webpack 捆绑模块之前使用 Rollup 连接模块。
默认值:false。
--extractCss=true|false
从全局样式中提取 css 到 css 文件而不是 js 文件中。
默认:false。
--extractLicenses=true|false
在单独的文件中提取所有许可证。
默认值:false。
--forkTypeChecker=true|false
在分叉进程中运行 TypeScript 类型检查器。
默认值:true。
--help=true|false|json|JSON
在控制台中显示此命令的帮助消息。
默认值:false。
--i18nMissingTranslation=warning|error|ignore
如何处理 i18n 的缺失翻译。
默认:警告。
--index=index 配置应用程序的 HTML 索引的生成。
--localize=true|false
--main=main 应用程序主入口点的完整路径,相对于当前工作区。
--namedChunks=true|false
对延迟加载的块使用文件名。
默认值:true。
--ngswConfigPath=ngswConfigPath ngsw-config.json 的路径。
--optimization=true|false 启用构建输出的优化。
--outputHashing=none|all|media|bundles
定义输出文件名缓存破坏散列模式。
默认值:无。
--outputPath=outputPath 新输出目录的完整路径,相对于当前工作空间。默认情况下,将输出写入当前项目中名为 dist/的文件夹。
--poll 启用并定义以毫秒为单位的文件监视轮询时间段。
--polyfills=polyfills polyfills 文件的完整路径,相对于当前工作空间。
--preserveSymlinks=true|false
解析模块时不要使用真实路径。
默认:false。
--prod=true|false "--configuration=production"的简写。当为 true 时,将构建配置设置为生产目标。默认情况下,生产目标是在工作区配置中设置的,以便所有构建都使用捆绑、有限的 tree-shaking 和有限的死代码消除。
--progress=true|false
在构建时将进度记录到控制台。
默认值:true。
--resourcesOutputPath=resourcesOutputPath 放置样式资源的路径,相对于 outputPath。
--serviceWorker=true|false
为生产构建生成服务工作者配置。
默认值:false。
--showCircularDependencies=true|false
在构建时显示循环依赖警告。
默认值:true。
--sourceMap=true|false
输出源映射。
默认:true。
--statsJson=true|false
生成一个"stats.json"文件,可以使用诸如"webpack-bundle-analyzer"之类的工具进行分析。
默认值:false。
--subresourceIntegrity=true|false
启用子资源完整性验证的使用。
默认值:false。
--tsConfig=tsConfig TypeScript 配置文件的完整路径,相对于当前工作空间。
--vendorChunk=true|false
使用仅包含供应商库的单独包。
默认值:true。
--verbose=true|false
向输出日志添加更多详细信息。
默认值:true。
--watch=true|false
文件更改时运行构建。
默认值:false。
--webWorkerTsConfig=webWorkerTsConfig Web Worker 模块的 TypeScript 配置。
首先,转到使用 ng generate 命令更新的 angular 项目。将 app.component.html 的内容替换为以下内容,然后运行该命令。本章位于 https://www.lidihuo.com/angular_cli/angular_cli_ng_generate.htm。
<app-goals></app-goals>
<router-outlet></router-outlet>

示例

下面给出了 ng build 命令的示例-
\>Node\>Lidihuo> 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 命令已经成功构建了我们的项目 Lidihuo。
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4