如何覆写Angular-cli自定义库中environments.ts的变量？

我来给你梳理几种可行的方案，根据你是否能修改自定义库的代码来选择：

方案一：修改自定义库，支持可配置环境变量（推荐最佳实践） #

硬编码环境变量本来就不符合Angular的设计原则，让库支持外部传入配置才是可持续的做法。步骤如下：

1. 在库中定义配置接口与注入令牌
   在你的new-library项目里新增配置文件：

   // new-library/src/lib/new-library.config.ts
   import { InjectionToken } from '@angular/core';
   
   export interface NewLibraryConfig {
     production: boolean;
     baseUrl: string;
   }
   
   export const NEW_LIBRARY_CONFIG = new InjectionToken<NewLibraryConfig>('NEW_LIBRARY_CONFIG');
   
   // 保留原有的默认配置
   export const DEFAULT_NEW_LIBRARY_CONFIG: NewLibraryConfig = {
     production: false,
     baseUrl: "localhost:8080/api"
   };
   

2. 修改NewModule，支持传入自定义配置
   替换库中模块直接导入environment.ts的逻辑，改用forRoot方法接收外部配置：

   // new-library/src/lib/new.module.ts
   import { NgModule, ModuleWithProviders } from '@angular/core';
   import { NEW_LIBRARY_CONFIG, DEFAULT_NEW_LIBRARY_CONFIG } from './new-library.config';
   
   @NgModule({
     // 你的模块声明、导入、导出内容
   })
   export class NewModule {
     static forRoot(config?: Partial<NewLibraryConfig>): ModuleWithProviders<NewModule> {
       return {
         ngModule: NewModule,
         providers: [
           {
             provide: NEW_LIBRARY_CONFIG,
             // 合并默认配置与外部传入的配置，外部配置优先级更高
             useValue: { ...DEFAULT_NEW_LIBRARY_CONFIG, ...config }
           }
         ]
       };
     }
   }
   

3. 在库内使用注入的配置
   库中所有用到environment.baseUrl的地方，都改为注入NEW_LIBRARY_CONFIG：

   // 库内的服务示例
   import { Injectable, Inject } from '@angular/core';
   import { NEW_LIBRARY_CONFIG, NewLibraryConfig } from './new-library.config';
   
   @Injectable()
   export class NewLibraryService {
     baseUrl: string;
   
     constructor(@Inject(NEW_LIBRARY_CONFIG) config: NewLibraryConfig) {
       this.baseUrl = config.baseUrl;
     }
   }
   

4. 在主项目中传入自定义配置
   主项目导入NewModule时，通过forRoot传入你需要的baseUrl：

   // 主项目的app.module.ts
   import { NgModule } from '@angular/core';
   import { NewModule } from 'new-library';
   import { environment } from './environments/environment'; // 主项目自己的环境变量
   
   @NgModule({
     imports: [
       NewModule.forRoot({
         baseUrl: environment.baseUrl // 这里可以直接写"myhost.com"，或用主项目环境变量
       })
     ]
   })
   export class AppModule { }
   

这种方案完全遵循Angular的依赖注入原则，不仅能解决当前问题，还能让库更灵活适配不同环境。

方案二：无法修改库代码时，用Webpack DefinePlugin替换变量（应急方案） #

如果库已经发布无法修改，可通过Webpack的DefinePlugin在构建时替换库内的变量值：

1. 安装自定义Webpack构建器

   npm install @angular-builders/custom-webpack --save-dev
   

2. 创建自定义Webpack配置文件
   在主项目根目录新建webpack.extra.js：

   const webpack = require('webpack');
   
   module.exports = {
     plugins: [
       new webpack.DefinePlugin({
         // 注意：需要匹配库编译后environment变量的实际名称，可能需要查看库的编译产物调整
         'environment.baseUrl': JSON.stringify('myhost.com')
       })
     ]
   };
   

3. 修改Angular项目配置
   在angular.json中，将build和serve的构建器替换为自定义Webpack构建器，并指定配置文件路径：

   "projects": {
     "your-project-name": {
       "architect": {
         "build": {
           "builder": "@angular-builders/custom-webpack:browser",
           "options": {
             "customWebpackConfig": {
               "path": "./webpack.extra.js"
             },
             // 保留原有其他配置
           }
         },
         "serve": {
           "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
             "customWebpackConfig": {
               "path": "./webpack.extra.js"
             },
             // 保留原有其他配置
           }
         }
       }
     }
   }
   

这种方法属于“hack”式解决方案，依赖于库的内部实现结构，一旦库更新调整了环境变量的定义方式，就可能失效，因此仅作为应急使用。

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