首页 > 解决方案 > 具有依赖项的 AOT NgModule 提供程序,NullInjectorError

问题描述

我已经尝试了https://stackoverflow.com/a/43293449/513570中的实现:

@NgModule()
export class SampleModule {
  static forRoot(config: CustomConfig): ModuleWithProviders {
    // User config get logged here
    console.log(config);
    return {
      ngModule: SampleModule,
      providers: [SampleService, {provide: 'config', useValue: config}]
    };
  }
}
@Injectable()
export class SampleService {

  constructor(@Inject('config') private config:CustomConfig) {
const sConfig = {
    key: 'value'
};


@NgModule({
    declarations: [
        ...
    ],
    imports: [
        BrowserModule,
        HttpModule,
        IonicModule.forRoot(MyApp),
        IonicStorageModule.forRoot(),
        SampleModule.forRoot(sConfig),
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        ...
    ],
    providers: [
        ...,
        // { provide: SampleService, useFactory: () => new SampleService(sConfig) 
    ],
})
export class AppModule { }

providers如果服务是在(注释代码)而不是 中导入的,则imports在开发和 AOT 中一切正常。

但是给定的代码仅代码在开发模式下工作正常。在 AOT 中,它会引发以下错误:

StaticInjectorError[l]: 
  StaticInjectorError[l]: 
    NullInjectorError: No provider for l!

在编译应用程序时,我一直在使用实时重新加载并保留登录 chrome,并且在某些时候(我想在修改之前)错误是:

StaticInjectorError[SampleService]: 
  StaticInjectorError[SampleService]: 
    NullInjectorError: No provider for SampleService!

我也尝试过提供export const SampleServiceToken = new InjectionToken<string>('SampleService');

它工作的唯一方法是在主应用程序@NgModule 中提供服务:

@NgModule({
    ...
    providers: [
        { provide: SampleService, useFactory: () => new SampleService(config) },
    ],
})

依赖项:

"@angular/common": "5.0.3",
"@angular/compiler": "5.0.3",
"@angular/compiler-cli": "5.0.3",
"@angular/core": "5.0.3",
"@angular/forms": "5.0.3",
"@angular/http": "5.0.3",
"@angular/platform-browser": "5.0.3",
"@angular/platform-browser-dynamic": "5.0.3",
"@ionic-native/core": "^4.4.0",
"@ionic-native/splash-screen": "4.4.0",
"@ionic-native/status-bar": "4.4.0",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",

标签: angulartypescriptionic2angular2-aot

解决方案


推荐阅读