Angular库中如何用environment.prod.ts替换environment.ts？

Angular官方的ng-packagr构建器并不支持应用中常用的fileReplacements配置，但可以通过以下几种方式实现库构建时的环境文件切换：

方案一：TypeScript路径映射+多tsconfig文件 #

这是最直接的替代方案，通过配置不同tsconfig的路径映射来指向对应环境文件：

1. 在projects/app1目录下创建两个tsconfig文件：
   • tsconfig.lib.prod.json：

     {
       "extends": "./tsconfig.lib.json",
       "compilerOptions": {
         "paths": {
           "@lib-env": ["./src/environments/environment.prod.ts"]
         }
       }
     }
     

   • tsconfig.lib.dev.json：

     {
       "extends": "./tsconfig.lib.json",
       "compilerOptions": {
         "paths": {
           "@lib-env": ["./src/environments/environment.ts"]
         }
       }
     }
     

2. 在库的代码中统一通过路径别名引入环境变量：

   import { environment } from '@lib-env';
   

3. 修改angular.json中app1-lib的build配置，为不同环境指定对应的tsconfig：

   "app1-lib": {
     "projectType": "library",
     "root": "projects/app1",
     "sourceRoot": "projects/app1/src",
     "prefix": "lib",
     "architect": {
       "build": {
         "builder": "@angular-devkit/build-angular:ng-packagr",
         "options": {
           "project": "projects/app1/ng-package.json"
         },
         "configurations": {
           "production": {
             "tsConfig": "projects/app1/tsconfig.lib.prod.json"
           },
           "development": {
             "tsConfig": "projects/app1/tsconfig.lib.dev.json"
           }
         },
         "defaultConfiguration": "production"
       },
       // ...test配置
     }
   }
   

4. 构建时指定环境即可：

   # 生产环境构建
   ng build app1-lib --configuration production
   # 开发环境构建
   ng build app1-lib --configuration development
   

方案二：注入式环境配置（推荐） #

从Angular库的设计理念出发，库本身不应绑定特定环境配置，更合理的方式是让使用库的应用传入环境参数：

1. 在库中定义环境接口和注入Token：

   import { InjectionToken } from '@angular/core';
   
   export interface LibEnvironment {
     production: boolean;
     apiBaseUrl: string;
     // 其他需要的环境字段
   }
   
   export const LIB_ENVIRONMENT = new InjectionToken<LibEnvironment>('LibEnvironment');
   

2. 在库模块中提供默认配置（可选，作为 fallback）：

   import { NgModule } from '@angular/core';
   import { LIB_ENVIRONMENT, LibEnvironment } from './lib-environment';
   
   const defaultEnv: LibEnvironment = {
     production: false,
     apiBaseUrl: 'https://dev.example.com/api'
   };
   
   @NgModule({
     providers: [
       { provide: LIB_ENVIRONMENT, useValue: defaultEnv }
     ]
   })
   export class App1LibModule { }
   

3. 在库的服务/组件中注入使用：

   import { Inject, Injectable } from '@angular/core';
   import { LIB_ENVIRONMENT, LibEnvironment } from './lib-environment';
   
   @Injectable()
   export class LibDataService {
     constructor(@Inject(LIB_ENVIRONMENT) private env: LibEnvironment) {
       console.log('当前API地址:', this.env.apiBaseUrl);
     }
   }
   

4. 在使用库的应用中，根据自身环境传入配置：

   import { NgModule } from '@angular/core';
   import { App1LibModule, LIB_ENVIRONMENT } from 'app1-lib';
   import { environment } from './environments/environment';
   
   @NgModule({
     imports: [App1LibModule],
     providers: [
       { provide: LIB_ENVIRONMENT, useValue: {
           production: environment.production,
           apiBaseUrl: environment.apiBaseUrl
         }
       }
     ]
   })
   export class AppModule { }
   

方案三：构建脚本替换（hack式） #

如果不想修改代码结构，可以使用文件替换工具在构建后替换环境变量：

1. 安装依赖：

   npm install replace-in-file --save-dev
   

2. 在package.json中添加构建脚本：

   "scripts": {
     "build:lib:prod": "ng build app1-lib --configuration production && npx replace-in-file \"from: './environments/environment'\" \"from: './environments/environment.prod'\" dist/app1-lib/**/*.js",
     "build:lib:dev": "ng build app1-lib --configuration development"
   }
   

这种方式简单但不够优雅，仅适合临时场景。

内容的提问来源于stack exchange，提问作者Jason Rich Darmawan