Angular独立组件导入TranslateModule.forRoot报错，求解决方法

错误原因 #

独立组件的imports数组仅接受模块类（Type<any>）或模块数组，而TranslateModule.forRoot()返回的ModuleWithProviders<TranslateModule>类型不满足该要求，因此无法直接放在组件的imports中。

解决步骤 #

1. 在根级别配置TranslateModule #

传统NgModule架构

在根模块（如AppModule）的imports中添加TranslateModule.forRoot()完成全局配置：

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: TranslateHttpLoader,
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

独立应用架构（bootstrapApplication）

在应用启动时通过importProvidersFrom导入配置：

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
      HttpClientModule,
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: TranslateHttpLoader,
          deps: [HttpClient]
        }
      })
    )
  ]
});

2. 独立组件中仅导入基础TranslateModule #

修改你的NavbarComponent，仅导入无配置的TranslateModule即可：

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss'],
  standalone:true,
  imports:[
    CommonModule,
    FormsModule,
    TranslateModule // 仅导入基础模块，配置已在根级别完成
  ]
})
export class NavbarComponent { }

其他导入ModuleWithProviders的方式 #

• 通过importProvidersFrom在组件级别引入：如果需要在特定组件内引入带配置的模块，可在组件的providers数组中用importProvidersFrom包裹ModuleWithProviders：

  @Component({
    // 其他组件配置
    providers: [
      importProvidersFrom(
        SomeCustomModule.forRoot({ /* 模块配置项 */ })
      )
    ]
  })
  

• 直接提取服务配置：无需依赖模块封装时，可将ModuleWithProviders中的服务配置直接放到组件的providers数组中，以TranslateLoader为例：

  @Component({
    // 其他组件配置
    imports: [TranslateModule],
    providers: [
      {
        provide: TranslateLoader,
        useFactory: TranslateHttpLoader,
        deps: [HttpClient]
      }
    ]
  })
  

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