使用CLI构建Angular 2应用程序以供生产使用

Question

使用CLI构建Angular 2应用程序以供生产使用

angularbuildproductionangular-cli

39

我刚安装了最新的angular-cli 1.0.0.beta.17，开始新项目后可以在4200端口无问题地提供服务——只看到标准的“app works！”信息。

但是，当我尝试使用命令ng build --prod为生产环境构建此空白的通用应用程序时，根本没有创建main.*.js文件，并出现了许多警告屏幕，如：

- 删除未使用的函数... - 初始化中的站点效果... - 等等

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

如何构建生产版本？

- bensiu

1

"ng serve --prod" 能用吗？ - Kevin Aud

我之前对于 --prod 标志毫不知情，我以为只需要调用启用生产模式的函数就足够了。但是使用该标志后，我的加载时间从 8-12 秒缩短至 3-4 秒。 - Rasmus Puls

9个回答

5

尝试使用命令：ng build --target=production，这应该会起作用。

- omt66

3

使用命令行版本（1.0.1），请使用以下命令：

ng build --prod

这将为您提供dist文件夹，其中包含index.html和所有打包好的js文件，准备用于生产。

- Amit

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 目录下，除非你已经在 angular-cli.json 文件中更改了 outDir 的值。

- Majid

2

它没有注释就能工作，没错，但这不是生产环境 - 它没有压缩文件 - main.bunde.js 文件超过 2 MB，只是一个捆绑文件... - bensiu

1

您想要AOT，这是由于使用-prod开关所暗示的。不幸的是，当Angular CLI本身出现故障时，错误消息并不有用。以下是我解决问题的方法：

npm install enhanced-resolve@3.3.0

我在这个页面中找到了解决方案：https://github.com/angular/angular-cli/issues/7113

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

- Cobus Kruger

1

无论是否实现Aot。

如果实现了Aot：

ng build --prod

如果AOT未被实现：

ng build --prod --aot=false

- abahet

1

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

- aimprogman

1

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

ng build --env=prod

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

<base href="./">

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

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

还有其他命令可用于构建，例如传递AOT和build-optimizer（以减小捆绑包大小）。

ng build --prod --build-optimizer

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

- Prabhat Maurya

0

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

Angular CLI 团队正在努力抑制这种警告，以便于生产构建。 https://github.com/angular/angular-cli/pull/1609

- Muralikrishnan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JoeF · Accepted Answer

已更新至 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与--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，则添加 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 enhanced-resolve@3.3.0

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