Azure环境下Angular生产构建仍运行开发模式的解决方法

我有一个Angular应用，希望在Azure环境中以prodMode运行。该应用通过Docker容器在Azure中构建和部署，对应的Dockerfile、环境文件、angular.json配置及main.ts代码如下：

Dockerfile #

FROM node:16-stretch as build-deps

WORKDIR /usr/src/app

COPY MyApp/package*.json ./
RUN npm install

COPY MyApp/src ./src
COPY MyApp/ts*.json ./
COPY MyApp/angular.json ./
RUN npm run build --configuration=production

FROM nginx:1.23-alpine

WORKDIR /usr/share/nginx/html
COPY MyApp/nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=build-deps /usr/src/app/dist/myapp .

EXPOSE 80
CMD ["/bin/sh",  "-c",  "envsubst < /usr/share/nginx/html/assets/env.template.js > /usr/share/nginx/html/assets/env.js && exec nginx -g 'daemon off;'" ] 

环境文件 #

environment.ts #

declare global {
  interface Window {
    env: {
      originMyAppBackend: string;
    };
  }
}

import { environment } from './environment.production';
environment.production = false;
export { environment };

environment.production.ts #

const originMyAppBackend = window['env']['originMyAppBackend'];

export const environment = {
  production: true,
  url: {
    internalApiPath: '/api/internal/',
    openApiPath: '/api/open/v1/',
    apiBaseUrl: `${originMyAppBackend}`,
  },
};

environment.development.ts #

export const environment = {
  production: false,
  url: {
    internalApiPath: 'NA',
    openApiPath: 'NA',
    apiBaseUrl: 'NA',
  },
};

angular.json相关配置 #

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/myapp",
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.json",
      "inlineStyleLanguage": "scss",
      "assets": ["src/favicon.ico", "src/assets"],
      "styles": ["src/styles.scss"],
      "scripts": ["node_modules/jsonstat-toolkit/iife.js"]
    },
    "configurations": {
      "production": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.production.ts"
          }
        ],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "namedChunks": false,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": true,
        "budgets": [
          {
            "type": "initial",
            "maximumWarning": "2mb",
            "maximumError": "5mb"
          },
          {
            "type": "anyComponentStyle",
            "maximumWarning": "20kb"
          }
        ]
      },
      "development": {
        "buildOptimizer": false,
        "optimization": false,
        "vendorChunk": true,
        "extractLicenses": false,
        "sourceMap": true,
        "namedChunks": true
      }
    },
    "defaultConfiguration": "development"
  }
}

main.ts配置 #

import { environment } from './environments/environment';

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

尽管Dockerfile指定以production配置构建，且angular.json配置了替换生产环境文件，但Azure环境中控制台仍显示“Angular is running in development mode”。修改environment.ts中的production为true后问题依旧，需要找到既能让应用在prodMode运行，又不影响本地开发的解决方案。

问题核心 #

当前问题的根源在于environment.ts的写法逻辑混乱：它导入生产环境配置后强制将production设为false，若构建时文件替换未生效，会直接导致生产环境运行在开发模式；同时本地开发的环境配置职责重叠，容易引发构建混淆。

1. 修正环境文件职责划分 #

调整environment.ts，让它作为本地开发环境的入口，直接导入environment.development.ts的配置，避免修改生产环境配置：

// src/environments/environment.ts
import { environment } from './environment.development';
export { environment };

保持environment.production.ts和environment.development.ts的现有内容不变（确保environment.production.ts中production: true）。

2. 验证文件替换配置 #

确认angular.json中production配置的文件替换路径完全匹配实际文件位置，避免大小写或目录层级错误：

"fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.production.ts"
  }
]

3. 强化Docker构建验证 #

修改Dockerfile的构建命令，添加日志输出以确认文件替换是否执行：

RUN npm run build --configuration=production --verbose

通过--verbose参数可查看构建过程中的文件替换日志，确认生产环境文件是否被正确替换。

4. 验证构建产物 #

构建完成后，检查打包后的产物是否正确设置了生产模式：

# 进入容器执行
docker exec -it <容器ID> grep -A 5 -B 5 "production:" /usr/share/nginx/html/main*.js

若输出显示production:true，说明构建正确，enableProdMode()会被正常调用。

5. 保障本地开发不受影响 #

本地开发时，Angular默认使用development配置（angular.json中defaultConfiguration: "development"），不会触发文件替换，environment.ts会导入environment.development.ts的配置，保持开发模式的原有行为。

内容的提问来源于stack exchange，提问作者PalBo