如何在Angular 6中通过`ng serve`设置环境答案

【问题标题】：How to set environment via `ng serve` in Angular 6如何在Angular 6中通过`ng serve`设置环境
【发布时间】：2018-10-14 22:06:26
【问题描述】：

我正在尝试将我的 Angular 5.2 应用程序更新到 Angular 6。我成功按照 Angular 更新指南中的说明进行操作（包括将 angular-cli 更新到 v6），现在我正在尝试通过

ng serve --env=local

但这给了我错误：

未知选项：'--env'

我使用多个环境 (dev/local/prod)，这就是它在 Angular 5.2 中的工作方式。现在如何在 Angular 6 中设置环境？

【问题讨论】：

它的 v6，你更新 angular-cli 以及整个应用程序，所以我认为它很明显：]
非常有帮助，马丁。感谢您分享您的见解。事实上，它一点也不明显。

标签： angular angular6 angular-cli

【解决方案1】：

这适用于 Angular 12

第 1 步：

"serve":
  "configurations": {
    "staging": {
      "browserTarget": "projectName:build:staging"
    }

第 2 步： npx ng run myapp:serve --configuration=staging

【讨论】：

【解决方案2】：

Angular 不再支持 --env 而是你必须使用

ng serve -c dev

用于开发环境，

ng serve -c prod

用于生产。

注意：-c 或 --configuration

【讨论】：

这是一年前问及回答的，你的答案也是错误的，它是-c（单破折号）或--configuration（双破折号）。
我们怎样才能对 SSR 版本做同样的事情？

【解决方案3】：

This 答案似乎不错。
但是，它导致我出现错误，因为它导致
Configuration 'xyz' could not be found in project ...
构建错误。
不仅需要更新 build 配置，还需要 serve 那些。

所以只是为了避免混淆：

angular 6 不支持 --env
--env 变成了--configuration || -c（现在更强大了）
为了管理各种环境，除了添加新的环境文件外，现在还需要对angular.json文件进行一些更改：
- 在 build { ... "build": "configurations": ... 属性中添加新配置
- 新的构建配置可能只包含fileReplacements部分，（但有更多选项可用）
- 在 serve { ... "serve": "configurations": ... 属性中添加新配置
- 新的服务配置应包含browserTarget="your-project-name:build:staging"

【讨论】：

感谢您的回答。它是对上述内容的一个很好的补充。干杯！

【解决方案4】：

开发环境可以使用命令ng serve -c dev ng serve -c prod 用于生产环境

虽然建筑也同样适用。您可以使用ng build -c dev 进行开发构建

【讨论】：

【解决方案5】：

您需要使用新的configuration 选项（这也适用于ng build 和ng serve）

ng serve --configuration=local

或

ng serve -c local

如果您查看您的 angular.json 文件，您会发现您可以更好地控制每个配置（aot、优化器、环境文件等）的设置

"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}

您可以获取更多信息here 以管理特定于环境的配置。

正如下面其他回复中所指出的，如果您需要添加新的“环境”，则需要将新配置添加到 build 任务中，并根据您的需要添加到服务和测试任务。

添加新环境

编辑：为了清楚起见，必须在build 部分中指定文件替换。因此，如果您想将ng serve 与特定的environment 文件一起使用（例如dev2），您首先需要修改build 部分以添加新的dev2配置

"build": {
   "configurations": {
        "dev2": {

          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.dev2.ts"
            }
            /* You can add all other options here, such as aot, optimization, ... */
          ],
          "serviceWorker": true
        },

然后修改您的serve 部分以添加新配置，指向您刚刚声明的dev2 build 配置

"serve":
      "configurations": {
        "dev2": {
          "browserTarget": "projectName:build:dev2"
        }

然后你可以使用ng serve -c dev2，它将使用dev2配置文件

【讨论】：

你知道是否可以在配置中添加 base-href 吗？或者只是在 ng build --c staging --base-href = /yyy/
@EduardoTolino：可以，有一个baseHref 选项
在哪里可以指定开发环境的远程调试端口？以便用VSCode进行调试。当然是Angular 6。这样ng serve 命令会在启动Chrome 浏览器时包含远程调试器端口。
信息链接已更新：github.com/angular/angular-cli/wiki/…
ng serve -c local 编译应用程序与“ng serve”相比需要时间

【解决方案6】：

你可以试试：ng serve --configuration=dev/prod

构建使用：ng build --prod --configuration=dev

希望您使用的是不同类型的环境。

【讨论】：

ng serve --configuration=dev/prod 命令比 ng serve 需要时间，为什么？
ng serve --configuration=prod 比 ng serve --configuration=prod 需要更多时间，因为文件最小化和生产就绪代码。
好的，如果我使用“ng serve --configuration=dev”命令意味着它也需要更多时间
不，不应该花费更多时间。 prod 环境有额外的步骤来缩小、丑化和优化生产代码。除非您明确激活这些额外步骤，否则其他环境应该花费正常时间。

【解决方案7】：

对于 Angular 2 - 5，请参阅文章 Multiple Environment in angular

对于 Angular 6，请使用 ng serve --configuration=dev

注意：对于 Angular 6，也请参阅同一篇文章。但是无论你在哪里找到--env，都可以使用--configuration。这适用于 angular 6。

【讨论】：

【解决方案8】：

使用此命令构建 Angular 6

ng build --prod --configuration=dev

【讨论】：