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

Per 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 builds。

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 值（这是一些库所需要的，比如反应）。
在代码上运行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

试试这个

@font-face{
    font-family: 'Lato';
    src: url('../fonts/lato-v11-latin-regular.eot');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/lato-v11-latin-regular.eot');
  src:  local('Lato Regular'), local('Lato-Regular'),
        url('../fonts/lato-v11-latin-regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/lato-v11-latin-regular.woff2') format('woff2'),
        url('../fonts/lato-v11-latin-regular.woff') format('woff'),
        url('../fonts/lato-v11-latin-regular.ttf') format('truetype'),
        url('../fonts/lato-v11-latin-regular.svg#Lato') format('svg');
}

构建系统默认使用ng build --env=prod的开发环境，但如果您environment.ts，则会使用ng build --env=prod。

如果您的项目是新的角度cli应用程序的示例结果。

environment.prod.ts

完成并且它位于/ dist下，除非您在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

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

带有CLI的Angular 2 - 用于生产

9 个答案:

https://angular.io/cli/build