Angular 16非独立组件场景下如何将应用配置注入AppModule

你可以直接将appConfig中的providers数组导入到AppModule的providers配置中，实现依赖配置的集中管理，具体操作如下：

1. 在AppModule中导入你的appConfig
2. 通过扩展运算符将appConfig.providers注入到模块的providers数组中，若模块本身有额外依赖，可直接合并

修改后的AppModule代码示例 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// 导入集中管理的配置文件
import { appConfig } from './app.config';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  // 注入配置中的所有依赖，如需添加自定义依赖可合并：[...appConfig.providers, YourCustomService]
  providers: [...appConfig.providers],
  bootstrap: [AppComponent]
})
export class AppModule { }

说明 #

• 这种方式完全兼容Angular 16的NgModule启动模式，无需修改main.ts中的bootstrapModule调用
• 所有依赖配置依然集中在app.config.ts中，方便统一维护和调整
• 后续新增或修改依赖时，只需在appConfig的providers数组中操作，无需改动AppModule

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