Angular生产构建时如何保留environment.ts为独立未混淆文件？

可以实现，下面是两种可靠的方案，都能让配置文件独立于主bundle，支持部署后修改且无需重新构建，同时其余代码保持生产环境的压缩混淆优化：

方案1：使用assets目录下的JSON配置文件 #

这种方案把配置放在JSON文件中，通过HTTP请求动态加载，是Angular社区常用的做法：

• 在src/assets目录下创建config.json，写入需要可配置的参数：

{
  "apiBaseUrl": "https://prod-api.example.com",
  "appVersion": "1.0.0",
  "enableAnalytics": true
}

• 创建一个配置加载服务，确保应用启动前就加载好配置：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class ConfigService {
  private configData: any;

  constructor(private http: HttpClient) {}

  // 加载配置，返回Promise供APP_INITIALIZER使用
  loadConfig(): Promise<void> {
    return this.http.get('/assets/config.json')
      .toPromise()
      .then(data => {
        this.configData = data;
      })
      .catch(err => {
        console.error('Failed to load config file', err);
        throw err;
      });
  }

  // 获取配置项
  get(key: string): any {
    return this.configData?.[key];
  }
}

• 在app.module.ts中配置APP_INITIALIZER，让应用启动前先加载配置：

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { ConfigService } from './config.service';

// 初始化工厂函数
export function initConfig(configService: ConfigService) {
  return () => configService.loadConfig();
}

@NgModule({
  // 其他模块、组件配置
  providers: [
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: initConfig,
      deps: [ConfigService],
      multi: true
    }
  ]
})
export class AppModule {}

• 在组件或服务中使用配置：

import { ConfigService } from './config.service';

constructor(private configService: ConfigService) {
  const apiUrl = this.configService.get('apiBaseUrl');
  // 使用apiUrl发起请求等操作
}

部署时，管理员直接修改dist/assets/config.json即可，无需重新构建。

方案2：使用全局变量的独立JS文件 #

如果偏好使用JS文件而非JSON，可以把配置挂在window全局对象上：

• 在src目录下创建env-config.js文件：

window.appEnv = {
  apiBaseUrl: "https://prod-api.example.com",
  enableDebug: false,
  timeout: 10000
};

• 修改angular.json，把这个文件加入assets列表，确保构建时复制到dist目录：

"assets": [
  "src/favicon.ico",
  "src/assets",
  "src/env-config.js"
]

• 在index.html的<head>中引入这个脚本（注意放在Angular主脚本之前）：

<script src="env-config.js"></script>

• 在Angular中声明全局变量类型，然后直接使用：

// 定义配置类型
interface AppEnv {
  apiBaseUrl: string;
  enableDebug: boolean;
  timeout: number;
}

// 扩展window接口，避免类型报错
declare global {
  interface Window {
    appEnv: AppEnv;
  }
}

// 在组件或服务中直接访问
const apiUrl = window.appEnv.apiBaseUrl;

部署时修改dist/env-config.js即可，主bundle不受影响。

注意事项 #

• 原来的environment.prod.ts可以保留静态常量（比如不会变动的配置），但需要动态修改的参数必须移到外部文件中。
• 生产构建时，Angular不会把这些外部JSON/JS文件打包进主bundle，它们会作为独立文件存在于dist目录中，不会被压缩混淆。

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