我刚刚安装了 angular-cli 1.0.0.beta.17（最新版本），开始新项目，能够毫无问题地在端口 4200 上服务项目 - 只是标准的“应用程序工作！”消息。
但是，当我尝试使用命令 ng build --prod 为生产构建这个空的通用应用程序时，我根本没有创建 main.*.js 文件，并且有一些警告屏幕，例如：
这是一个全新的空项目——我还没有机会破坏任何东西......
如何构建生产版本？
【问题讨论】：
标签： angular build production angular-cli
为 Angular v6+ 更新
# Prod - these are equivalent
ng build --configuration=production
ng build --c=production
ng build --prod=true
# Dev - and so are these
ng build --configuration=development
ng build --c=development
ng build --prod=false
ng build
更多标志设置在这里
根据 Angular-cli 的 github wiki v2+，这些是启动开发和生产构建的最常用方法
# Prod these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod
# Dev and so are these
ng build --target=development --environment=dev
ng build --dev --env=dev
ng build --dev
ng build
有不同的默认标志会影响 --dev 和 --prod 构建。
Flag --dev --prod
--aot false true
--environment dev prod
--output-hashing media all
--sourcemaps true false
--extract-css false true
--prod 还设置了以下不可标记的设置：
.angular-cli.json 中配置，则添加服务工作者。 process.env.NODE_ENV 替换为production
值（这对于某些库来说是必需的，例如 react）。 我需要进行一些故障排除才能使 AOT 正常工作。我跑的时候：
ng build --prod --aot=false
我会得到一个类似于
的错误Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'
最初，我必须进行一些项目重构才能让 AOT 正常工作。但是，如果您遇到此错误，它们可能是一个修复程序。试试
npm i 增强解析@3.3.0
【讨论】：
ng build --configuration=production，并在此处设置标志文件替换？
尝试使用：ng build --target=production 这应该可以。
【讨论】：
试试这个
ng build --env=prod
构建系统默认使用environment.ts 的开发环境，但如果您使用ng build --env=prod，则将使用environment.prod.ts。
如果您的项目是新的 Angular cli 应用程序，则为示例结果。
10% building mod3439ms building modules 1ms add01564ms 917ms asset45ms emittingHash: 9216e76d6f10637c945c
Version: webpack 2.1.0-beta.22
Time: 6358ms
Asset Size Chunks Chunk Names
main.bundle.js 2.6 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.61 MB 0, 2 [emitted] main
styles.map 14.2 kB 1, 2 [emitted] styles
inline.map 5.59 kB 2 [emitted] inline
index.html 482 bytes [emitted]
assets/.npmignore 0 bytes [emitted]
chunk {0} main.bundle.js, main.map (main) 2.06 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.82 kB 0
chunk {0} index.html 350 bytes [entry] [rendered]
完成并且它在 /dist 下，除非您在 angular-cli.json 中更改了 outDir
【讨论】：
使用 cli 版本 (1.0.1) 使用：
ng build --prod
这将为您提供包含 index.html 的 dist 文件夹以及所有已准备好用于生产的捆绑 js 文件。
【讨论】：
您必须更新最新版本的 angular-cli、typescript。 如果你使用命令：
ng build --prod --aot=false
您的项目编译 JIT 编译，如果您使用 angular-cli，则必须工作。
如果你想用命令构建
ng build --prod --aot=true
然后是AOT编译，你必须更新main.ts文件到：
import { enableProdMode } from '@angular/core';
import { platformBrowser } from '@angular/platform-browser';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowser().bootstrapModuleFactory(AppModule);
【讨论】：
是否实现了 Aot。
如果实现了 Aot：
ng build --prod
如果 Aot 没有实现：
ng build --prod --aot=false
【讨论】：
您需要 AOT，这是通过使用 -prod 开关暗示的。不幸的是，当 Angular CLI 本身中断时，错误消息没有帮助。我就是这样解决的：
npm install enhanced-resolve@3.3.0
我在这个页面很长很长的地方找到了解决方案：https://github.com/angular/angular-cli/issues/7113
我看到有人提到将 Angular CLI 版本更新到至少 1.2.6。也解决了这个问题，但还没有测试。
【讨论】：
有很多命令可以使用 Angular cli 将 Angular 应用程序构建到生产模式。
ng 构建 --env=prod
一旦您在 cmd dist 上执行此命令，默认文件夹将创建，该文件夹将包含与 prod build 相关的所有缩小文件，但不会在 index.html 中设置基本路径。 要更改 index.html，请进行手动更改，例如添加 (.) 即。
<base href="./">
您也可以在使用 angular/CLI 命令在 prod 模式下构建代码时传递参数。
ng build --base-href=./ --env=prod
还有其他命令可以构建，例如传递 AOT 和构建优化器（以减少包大小）。
ng build --prod --build-optimizer
如果您想在构建后更改默认文件夹名称 (dist)，则可以更改 .angular-cli.json 中的 outDir 值。
【讨论】：
这些是来自您的 java 脚本源代码或您在项目中使用的第三方库的 uglify js 警告。现在您可以忽略它们。
Angular cli 团队正在努力为 prod 构建抑制这种情况 https://github.com/angular/angular-cli/pull/1609
【讨论】：