在 Angular 2 中启用生产模式答案

【问题标题】：enable production mode in angular 2在 Angular 2 中启用生产模式
【发布时间】：2017-04-24 19:06:53
【问题描述】：

我一直在使用 Angular 2 和 Firebase 创建 Web 应用程序，我想启用生产模式。

main.ts

if (environment.production) {
  enableProdMode();
}

环境.ts

export const environment = {
  production: true
};

环境.prod.ts

export const environment = {
  production: true
};

然后我尝试 ng build -prod; ng 服务，但仍然无法正常工作。

提前致谢。

【问题讨论】：

你使用 angular-cli 吗？
那么，您尝试过什么？您只需要 ng build --prod。
我正在使用 angular-cli，我尝试过 ng build -prod; ng 服务，但不工作
如果您想构建人工制品，请使用 ng build。如果您想从 cli dev 服务器为它们提供服务，请使用 ng serve。一个接一个地使用它们没有任何用处。

标签： angular production-environment

【解决方案1】：

ng build --prod 将在 /dist 文件夹中创建构建工件 - 您必须将这些文件放在不同的 Web 服务器上（即，之后您不再使用 ng serve）。

如果您只想使用ng serve 运行您的应用程序，但使用生产模式，然后使用：

ng serve --prod

编辑

我似乎没有很好地解释这一点。您的要求是“启用生产模式”。您有两种方法可以做到这一点，具体取决于您要执行的操作。

如果您想使用 angular-cli 开发服务器在生产模式下运行您的应用，以测试生产模式是否正常工作，请使用：

ng serve --prod

但是，如果您已准备好将应用部署到生产网络服务器，那么这是一个两步过程：

使用：ng build --prod
将/dist 文件夹的输出复制到您的生产网络服务器上

请注意，我不会同时使用两者 - 我使用 ng build 或 ng serve ，这取决于我想要完成的任务。

【讨论】：

/dist 在运行 ng serve --prod 后消失
/dist 总是在你 ng serve 时被删除。
如何将文件放在不同 Web 服务器上的文件夹 /dist 中，因为当我运行 ng build --prod 然后 ng serve --prod 它仍然无法正常工作

【解决方案2】：

ng serve --prod 对我不起作用。

顺便说一句，这有效?

ng serve --configuration=production

它创建了一个测试生产服务器，它的工作方式与在部署的服务器上的工作方式相同。我尝试使用 environment.js 进行此测试（所有其他解决方案都不适用于我）

您可以关注this（成为 Angular 环保主义者）文章，了解有关 Angular 环境的更多信息

【讨论】：

【解决方案3】：

您应该使用ng run build --prod 或npm run build 再试一次至于我，在我的 package.json 文件中，我设置了这样的脚本

"scripts":{
 "ng": "ng",
 "publish": "ng build --prod",
 "start": "ng serve --host 0.0.0.0 --port 4200",
 "hmr": "ng serve --host 0.0.0.0 --port 4200 4201 --hmr -e=hmr",
 "test": "ng test",
 "pree2e": "webdriver-manager update --standalone false --gecko false",
 "e2e": "protractor"},..

然后，当我想构建（发布）我的 Angular 项目时，我使用了npm run publish 命令。如果要更改"build" 而不是"publish"，则必须使用"npm run build" 会好的。

【讨论】：

【解决方案4】：

我在 angular-cli 1.0.0-beta.28.3 中观察到了这一点。 dist 在 ng-serve 上消失。如果您想保留构建，请尝试ng build --output-path=last-build/ 并查看this issue。

但重点是在创建build 后，您不需要再创建ng serve --prod。正如@snorkpete 所说，请在创建构建后将dist 文件夹复制到您的Web 服务器。您的网络服务器将负责运行该应用程序。 Remeber, you will have to create a virtual host for this。但是，如果你只是想在本地机器上运行它并想要实时的webpack，只需执行ng serve --prod，实时的webpack 与您拥有的dist 无关。

【讨论】：

【解决方案5】：

为了让您的 angular2 应用程序进入生产模式：

打开你的 Angular appfolder 并打开 main.ts 和 main.ts 会有

import {environment} './environment/environment'

在上次编写的环境中添加 .prod：

import {environment} './environment/environment.prod'

【讨论】：