如何在Nx工作区中向共享服务注入应用环境API地址？

首先直接回答你的问题：AuthenticationService<environment>这种写法不可行，因为TypeScript泛型要求传入的是类型，而environment是运行时的具体对象实例，并非类型，这样写会触发编译错误。

下面提供几种可行的实现方式，从基础到进阶：

基础方案1：组件内通过工厂函数注入服务 #

步骤1：修改共享服务，添加API地址参数 #

// 共享库中的AuthenticationService
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class AuthenticationService {
  constructor(
    private http: HttpClient,
    private apiUrl: string // 接收应用专属的API地址
  ) {}

  // 示例：使用传入的apiUrl发起请求
  login(credentials: { username: string; password: string }) {
    return this.http.post(`${this.apiUrl}/auth/login`, credentials);
  }
}

步骤2：组件中通过useFactory配置服务 #

在组件的providers里用工厂函数创建服务实例，同时传入当前应用的environment.apiUrl：

import { Component, OnInit } from '@angular/core';
import { ReactiveFormsModule, FormsModule, HttpClientModule } from '@angular/common/http';
import { AuthenticationService } from '@workspace/shared-services';
import { environment } from '../environments/environment';

@Component({
  standalone: true,
  imports: [ReactiveFormsModule, FormsModule, HttpClientModule],
  providers: [
    {
      provide: AuthenticationService,
      useFactory: (http: HttpClient) => new AuthenticationService(http, environment.apiUrl),
      deps: [HttpClient] // 声明依赖的服务
    }
  ],
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
})
export class LoginComponent implements OnInit {
  ngOnInit() {}
}

基础方案2：用InjectionToken解耦配置 #

这种方式更灵活，避免组件直接依赖environment，同时让服务和配置解耦：

步骤1：在共享库中定义InjectionToken #

// 共享库中创建token文件
import { InjectionToken } from '@angular/core';

export const API_URL = new InjectionToken<string>('应用专属API地址');

步骤2：在应用层面提供token值 #

每个应用的app.config.ts中注册当前环境的API地址：

// 应用A的app.config.ts
import { ApplicationConfig } from '@angular/core';
import { environment } from './environments/environment';
import { API_URL } from '@workspace/shared-services';

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: API_URL, useValue: environment.apiUrl }
  ]
};

步骤3：共享服务注入token #

import { Injectable, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { API_URL } from './tokens';

@Injectable()
export class AuthenticationService {
  constructor(
    private http: HttpClient,
    @Inject(API_URL) private apiUrl: string
  ) {}

  login(credentials: any) {
    return this.http.post(`${this.apiUrl}/auth/login`, credentials);
  }
}

步骤4：组件中直接声明服务 #

此时组件无需关心API地址的来源，直接在providers中添加服务即可：

@Component({
  // ...其他配置
  providers: [AuthenticationService],
})
export class LoginComponent implements OnInit {
  ngOnInit() {}
}

进阶方案：统一环境接口+共享库管理 #

适合多应用场景下统一环境配置规范，扩展性更强：

步骤1：创建共享环境库 #

在Nx工作区中创建@workspace/env库，定义统一的环境接口和token：

// @workspace/env/src/lib/environment.interface.ts
export interface AppEnvironment {
  apiUrl: string;
  // 其他共享配置字段，如appName、timeout等
}

// @workspace/env/src/lib/tokens.ts
import { InjectionToken } from '@angular/core';
import { AppEnvironment } from './environment.interface';

export const APP_ENVIRONMENT = new InjectionToken<AppEnvironment>('应用完整环境配置');

步骤2：各应用实现专属环境 #

每个应用的environment.ts遵循统一接口：

// 应用A的environment.ts
import { AppEnvironment } from '@workspace/env';

export const environment: AppEnvironment = {
  apiUrl: 'https://api-app-a.example.com'
};

步骤3：应用层面提供环境配置 #

在应用的app.config.ts中注册APP_ENVIRONMENT：

import { ApplicationConfig } from '@angular/core';
import { environment } from './environments/environment';
import { APP_ENVIRONMENT } from '@workspace/env';

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

步骤4：共享服务注入完整环境 #

import { Injectable, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { APP_ENVIRONMENT } from '@workspace/env';

@Injectable()
export class AuthenticationService {
  constructor(
    private http: HttpClient,
    @Inject(APP_ENVIRONMENT) private env: AppEnvironment
  ) {}

  login(credentials: any) {
    return this.http.post(`${this.env.apiUrl}/auth/login`, credentials);
  }
}

这种方案的优势是：所有应用环境遵循统一规范，共享服务依赖抽象接口而非具体实现，后续新增应用或修改配置时，只需遵循接口即可，维护成本更低。

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