Angular多模块项目中如何为服务注入正确的environment

1. 在库中定义抽象环境接口与注入令牌 #

先在共享库内创建统一的环境接口，约束所有应用环境的字段结构，再定义一个注入令牌，让服务依赖这个抽象令牌而非具体的environment文件：

// 库内文件：libs/shared/src/lib/environment.interface.ts
export interface AppEnvironment {
  apiUrl: string;
  production: boolean;
  // 按需添加其他环境字段
}

// 库内文件：libs/shared/src/lib/environment.token.ts
import { InjectionToken } from '@angular/core';
import { AppEnvironment } from './environment.interface';

export const APP_ENVIRONMENT = new InjectionToken<AppEnvironment>('APP_ENVIRONMENT');

2. 修改库服务，注入抽象令牌 #

调整库内服务的代码，移除对具体environment的直接导入，改为注入APP_ENVIRONMENT令牌：

// 库内服务：libs/shared/src/lib/my-shared.service.ts
import { Injectable, Inject } from '@angular/core';
import { APP_ENVIRONMENT } from './environment.token';
import { AppEnvironment } from './environment.interface';

@Injectable({
  providedIn: 'root'
})
export class MySharedService {
  constructor(@Inject(APP_ENVIRONMENT) private env: AppEnvironment) {}

  getApiBaseUrl() {
    return this.env.apiUrl;
  }

  // 其他需要使用环境配置的业务方法
}

3. 各应用提供自身环境实例 #

在每个应用的根模块（或Angular 14+的app.config.ts）中，将自身的environment实例绑定到APP_ENVIRONMENT令牌：

应用1的配置（模块模式）： #

// apps/app1/src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_ENVIRONMENT } from '@your-project/shared'; // 替换为你的库路径
import { environment } from '../environments/environment';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    { provide: APP_ENVIRONMENT, useValue: environment }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

应用2的配置（独立组件模式）： #

// apps/app2/src/app/app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { APP_ENVIRONMENT } from '@your-project/shared'; // 替换为你的库路径
import { environment } from '../environments/environment';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    { provide: APP_ENVIRONMENT, useValue: environment }
  ]
};

4. 验证效果 #

启动不同应用时，库内服务会自动注入对应应用的环境配置，既保证了服务的复用性，又适配了多应用的环境差异。

内容的提问来源于stack exchange，提问作者BuZZ-dEE