如何在Angular 2+的AppModule声明后动态添加全局作用域提供者？

当然可行！我来给你分享几个实用的方案，既能把全局提供者和AppModule的声明彻底分开，还能轻松批量注册NSwag生成的服务客户端，让代码更整洁易维护。

方案1：抽离全局提供者到单独数组文件 #

这是最直接的方式，把所有全局服务（包括NSwag生成的）集中放在一个文件里，再导入到AppModule：

1. 新建一个global-providers.ts文件，专门存放全局提供者数组：

// 导入NSwag生成的所有服务客户端
import { UserApiService } from './generated/user-api.service';
import { ProductApiService } from './generated/product-api.service';
import { OrderApiService } from './generated/order-api.service';

// 定义全局提供者数组
export const GLOBAL_PROVIDERS = [
  UserApiService,
  ProductApiService,
  OrderApiService,
  // 这里还可以添加其他自定义全局服务
];

2. 在AppModule中导入并使用这个数组：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // NSwag服务通常依赖HttpClient
import { GLOBAL_PROVIDERS } from './global-providers';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent], // 这里只放组件/指令/管道的声明
  imports: [BrowserModule, HttpClientModule],
  providers: [...GLOBAL_PROVIDERS], // 展开全局提供者数组
  bootstrap: [AppComponent]
})
export class AppModule { }

方案2：自动批量注册NSwag服务（避免手动维护） #

如果NSwag生成的服务很多，手动一个个加太麻烦，可以用动态导入实现自动化注册：

1. 新建nswag-providers.ts文件，批量导入所有NSwag服务：

// 批量导入generated目录下所有.service.ts文件（Angular 14+支持import.meta.glob）
const serviceModules = import.meta.glob('./generated/*.service.ts', { eager: true });

// 从每个模块中提取服务类，组成提供者数组
export const NSWAG_PROVIDERS = Object.values(serviceModules).map(module => {
  // 假设NSwag生成的服务都是默认导出的类
  return module.default;
});

2. 在global-providers.ts中整合NSwag服务和其他全局提供者：

import { NSWAG_PROVIDERS } from './nswag-providers';
import { AuthService } from './core/auth.service'; // 自定义全局服务

export const GLOBAL_PROVIDERS = [
  ...NSWAG_PROVIDERS, // 批量导入NSwag服务
  AuthService
];

这样后续NSwag更新服务后，你完全不用手动修改提供者数组，新生成的服务会自动被包含进来。

方案3：用自定义NgModule封装全局提供者 #

如果想更贴合Angular的模块化思想，可以把全局提供者封装成一个独立模块：

1. 新建GlobalProvidersModule.ts：

import { NgModule } from '@angular/core';
import { NSWAG_PROVIDERS } from './nswag-providers';
import { AuthService } from './core/auth.service';

@NgModule({
  providers: [
    ...NSWAG_PROVIDERS,
    AuthService
  ]
})
export class GlobalProvidersModule { }

2. 在AppModule中导入这个模块即可：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { GlobalProvidersModule } from './global-providers.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule, GlobalProvidersModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

这种方式让全局提供者的管理更模块化，后续如果要调整全局服务，只需要修改这个模块就行，完全不影响AppModule的核心声明。

注意事项 #

• 确保NSwag生成的服务带有@Injectable()装饰器，如果生成的服务已经指定了providedIn: 'root'，其实它已经是全局可用的了，但如果想统一集中管理，还是可以按上面的方式注册（不会有冲突，Angular会自动处理）。
• 不要忘记在AppModule中导入HttpClientModule，因为NSwag生成的API服务几乎都依赖它。

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