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

Question

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

为应用程序提供服务

ng serve --env=local

但这给了我错误：

Unknown option: '--env'

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

Answer 1

您需要使用新的 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 以管理特定于环境的配置。

正如下面其他回复所指出的，如果您需要添加一个新的 'environment'，您需要向 build 任务添加一个新的配置，并且，取决于根据您的需要，serve 和 test 任务也是如此。

添加新环境

编辑：为清楚起见，必须在 build 部分指定文件替换。所以如果你想对一个特定的environment文件使用ng serve（比如说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配置文件

Answer 2

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

为了避免混淆：

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

Answer 3

使用此命令 Angular 6 构建

ng build --prod --configuration=dev

Answer 4

对于 Angular 2 - 5 参考文章 Multiple Environment in angular

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

Note: Refer the same article for angular 6 as well. But wherever you find --env instead use --configuration. That's works well for angular 6.

Answer 5

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

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

希望您使用的是一种不同的环境。

Answer 6

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

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

Answer 7

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

ng serve -c dev

用于开发环境，

ng serve -c prod

用于生产。

注意：-c 或 --configuration

Answer 8

这适用于 Angular 12

第 1 步：

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

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

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

How to set environment via `ng serve` in Angular 6

angular-cli

angular

angular6