环境默认为 Angular 项目中的开发，忽略构建和服务命令中的配置标志

Question

我正在构建一个相当简单的角度项目，并且我正处于需要部署工作的阶段。在此之前，我打算添加环境，以便应用程序自动调用正确的 apiUrl。我需要的 3 个环境是本地、开发、生产。

我遵循了官方指南：https://v15.angular.io/guide/build，但无论我做什么，应用程序总是在开发环境中通过 build 或serve 命令启动。

我做了什么： 我已经根据链接指南更新了我的 angular.json 文件，请参阅架构师 > 构建和服务：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "chat-viewer-ui": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "fileReplacements": [
                {
                  "replace": "/src/environments/environment.ts",
                  "with": "/src/environments/environment.development.ts"
                }
              ]
            },
            "local":{
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true,
              "fileReplacements": [
                {
                  "replace": "/src/environments/environment.ts",
                  "with": "/src/environments/environment.local.ts"
                }
              ]
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "chat-viewer-ui:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "chat-viewer-ui:build:production"
            },
            "development": {
              "browserTarget": "chat-viewer-ui:build:development"
            },
            "local": {
              "browserTarget": "chat-viewer-ui:build:local"
            }
          },
          "defaultConfiguration": "production"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "chat-viewer-ui:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/styles.scss"
            ],
            "scripts": []
          }
        }
      }
    }
  }
}

角度版本15.2.10 角度 CLI 15.2.10

据我了解，必要的步骤是配置下具有环境名称的属性，因此在我的例子中为“本地”、“开发”、“生产”。每个都有 fileReplacements 配置。由于它默认为生产环境，因此没有文件替换。

接下来您需要为每个环境添加一个环境文件：

ng generate environments

创建环境文件夹。我里面有3个文件： 环境.开发.ts

export const environment = {
production: false,
apiUrl: 'test-apiURL',
name: 'development'
};

环境.local.ts

export const environment = {
production: false,
apiUrl: 'http://localhost:8989/',
name: 'local'
};

环境.ts

export const environment = {
production: true,
apiUrl: 'production-apiURL',
name: 'production'
};

由于在 angular.json 配置中，环境默认为生产环境，因此没有 fileReplacement，而 enviroment.ts 是生产配置

最后这是我的构建和服务命令：

  "scripts": {
    "ng": "ng",
    "start-prod": "ng serve",
    "start-local": "ng serve --configuration local",
    "start-dev": "ng serve --configuration development",
    "build-prod": "ng build",
    "build-dev": "ng build --configuration development",
    "build-local": "ng build --configuration local",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

在 app.component.ts 中我添加了一个简单的打印：

constructor() { 
console.log('running in ' + environment.name + ' environment');
}

我已经运行了命令

ng serve --configuration local
ng serve
npm run start-local
npm run start-prod

但是对于两者来说，无论什么情况，它每次“开发”都会输出，不仅输出是错误的，而且请求的 api url 也是错误的

我也尝试过跑步：

ng build --configuration local
npm run build-local

并手动提供

npx http-server ./dist

和相同的结果

我已经删除了node_modules并运行：

npm install

并重试了一切

这让我抓狂。据我所知，我所做的一切都是按照指导方针进行的，我在 2019 年发现了一篇类似的帖子，但这个问题对我来说没有明确的答案。我检查了拼写错误，也找不到任何东西。请帮忙

Answer 1

确保您正在导入

environment.ts

，而不是

environment.development.ts

:

import { environment } from "src/environments/environment";