带有CLI的Angular 2 - 用于生产

Question

我刚刚安装了angular-cli 1.0.0.beta.17（最新的一个），启动新项目，能够在端口4200上提供项目而没有任何问题 - 只需标准的“app works！” 信息。

然而，当我尝试使用命令ng build --prod来构建生产这个空的和通用的应用程序时，我根本没有创建main。*。js文件，并且有几个警告屏幕，例如：

• 删除未使用的功能......
• 初始化中的网站效应......
• 等等

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

如何建立生产版本？

Answer 1

更新了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

这里有更多标志设置

https://angular.io/cli/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 vs --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配置，则添加服务工作者。
• 用production值替换模块中的process.env.NODE_ENV （某些库需要这样做，比如反应）。
• 在代码上运行UglifyJS。

---

我需要做一些故障排除才能让AOT正常工作。 我跑的时候：

ng build --prod --aot = false

我会得到一个类似的错误

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

最初，我不得不做一些项目重构才能让AOT工作。 但是，如果遇到此错误，它们可能是一个修复程序。 尝试

npm i enhanced-resolve@3.3.0

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

Answer 2

尝试使用：ng build --target = production这应该可行。

Answer 3

尝试这个

 ng build --env=prod

构建系统默认使用使用environment.ts的开发环境，但是如果你ng build --env=prod那么将使用environment.prod.ts 。

如果您的项目是新的角度cli app，则会得到结果。

 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]

完成和它的下/距离，除非你已经改变outDir在angular-cli.json

Answer 4

使用cli版本（1.0.1）使用：

ng build --prod

这将为您提供带有index.html的dist文件夹以及准备生产的所有捆绑的js文件。

Answer 5

Aot是否实现。

如果实施Aot：

ng build --prod

如果没有实现Aot：

ng build --prod --aot=false

Answer 6

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

你想要AOT，这是使用-prod开关所暗示的。 不幸的是，当Angular CLI本身中断时，错误消息没有帮助。 这就是我解决它的方式：

npm install enhanced-resolve@3.3.0

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

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

Answer 8

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

ng build --env = prod

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

<base href="./">

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

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

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

ng build --prod --build-optimizer

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

Answer 9

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

Angular cli团队正致力于为prod构建抑制此问题https://github.com/angular/angular-cli/pull/1609