带有 CLI 的 Angular 2 - 为生产而构建

Question

我刚刚安装了 angular-cli 1.0.0.beta.17（最新的），开始新项目，能够毫无问题地在端口 4200 上为项目提供服务 - 只是标准的“应用程序工作！”留言。

但是，当我尝试使用命令

ng build --prod

为生产构建这个空的通用应用程序时，我根本没有创建 main.*.js 文件，并且有一些警告屏幕，例如：

• 删除未使用的功能...
• 初始化中的场地效果...
• 等等

这是一个全新的空项目 - 我还没有机会破坏任何东西......

如何构建生产版本？

Answer 1

针对 Angular v16+ 进行了更新

# Prod - these are equivalent
ng build --configuration=production
ng build --c=production
ng build 

# Dev - and so are these
ng build --configuration=development
ng build --c=development

https://angular.io/cli/build

更多标志设置在这里 https://angular.io/cli/build

---

此行下方的旧代码

---

针对 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

  中配置，则添加 Service Worker。
• 将模块中的

  process.env.NODE_ENV

  替换为

  production

  值（某些库需要此值，例如 React）。
• 在代码上运行 UglifyJS。

---

原文： 我需要进行一些故障排除才能使 AOT 正常工作。当我跑步时：

ng build --prod --aot=false

我会返回类似于

的错误

Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

最初，我必须进行一些项目重构才能让 AOT 发挥作用。但是，如果您遇到此错误，它们可能是修复方法。尝试一下

npm i [电子邮件受保护]

https://github.com/angular/angular-cli/issues/7113

Answer 2

尝试使用：ng build --target=product 这应该有效。

Answer 3

试试这个

 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 下，除非您在

outDir

 中更改了 

angular-cli.json

Answer 4

使用 cli 版本（1.0.1）使用：

ng build --prod

这将为您提供 dist 文件夹，其中包含 index.html 和所有捆绑的 js 文件，可供生产使用。

Answer 5

您必须更新最新版本的 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);

Answer 6

是否实现Aot。

如果实施 Aot :

ng build --prod

如果未实施 Aot :

ng build --prod --aot=false

Answer 7

您需要 AOT，这是通过使用

-prod

开关暗示的。不幸的是，当 Angular CLI 本身崩溃时，错误消息没有帮助。我是这样解决的：

npm install [email protected]

我在这个页面上找到了很长一段路的解决方案：https://github.com/angular/angular-cli/issues/7113

我看到有人提到将 Angular CLI 版本更新到至少 1.2.6。也解决了这个问题，但还没有测试过。

Answer 8

有很多命令可以使用 Angular cli 将 Angular 应用程序构建到生产模式。

ng build --env=prod

一旦您在 cmd dist 上执行此命令，将创建默认文件夹，其中包含与 prod 构建相关的所有缩小文件，但它不会在 index.html 中设置基本路径。 要在 index.html 中进行更改，请进行手动更改，例如添加 (.) ie。

<base href="./">

您还可以使用 Angular/CLI 命令在产品模式下构建代码时传递参数。

ng build --base-href=./ --env=prod

还有其他命令可以构建，例如传递 AOT 和构建优化器（以减少包大小）。

ng build --prod --build-optimizer

如果您想在构建后更改默认文件夹名称（dist），则可以更改 .angular-cli.json 中的 outDir 值。

Answer 9

这些是 uglify js 警告，要么来自您的 java 脚本源代码，要么来自您在项目中使用的第三方库。现在您可以忽略它们。

Angular cli 团队正在努力在产品构建中抑制这种情况 https://github.com/angular/angular-cli/pull/1609