Angular 2:在注入Router之前引导至少一个组件

时间:2016-08-25 14:52:04

标签: angular

我在RC5应用中遇到此错误:

  

承诺拒绝:在注入路由器之前引导至少一个组件。

main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts:

@NgModule({
  imports: [
    BrowserModule,
    routing,
    SharedModule.forRoot()
  ],
  declarations: [
    AppComponent, 
    ErrorComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

shared.module.ts:

@NgModule({
  imports: [CommonModule, RouterModule, HttpModule, FormsModule, ReactiveFormsModule],
  declarations: [TranslatePipe, DateToStringPipe, HeaderComponent, FooterComponent],
  exports: [TranslatePipe, DateToStringPipe, CommonModule, FormsModule, ReactiveFormsModule, HeaderComponent, FooterComponent]
})
export class SharedModule {

  static forRoot(): ModuleWithProviders {

    return {
      ngModule: SharedModule,
      providers: [
        FeedbackService,
        CookieService,
        AuthService,
        LoggerService,
        RouteGuard,
        {
          provide: TranslateLoader,
          useFactory: (http: Http) => new TranslateStaticLoader(http, 'app/languages', '.json'),
          deps: [Http]
        },
        TranslateService,
        SearchService,
        SharedComponent,
        HeaderComponent,
        FooterComponent
      ]
    };

  }

}

@NgModule({
  exports: [ SharedModule],
  providers: []
})
export class SharedRootModule {}

app.component.ts:

export class AppComponent extends SharedComponent implements OnInit {

constructor(
    _feedbackService: FeedbackService,
    _loggerService: LoggerService,
    _translateService: TranslateService,
    _authService: AuthService,
    _router: Router
) {

    super(
        _feedbackService,
        _loggerService,
        _translateService,
        _authService,
        _router
    );

}

最后是shared.component.ts:

constructor(
    protected _feedbackService: FeedbackService,
    protected _loggerService: LoggerService,
    protected _translateService: TranslateService, 
    protected _authService: AuthService, 
    protected _router: Router
) {

}

我尝试使用AppComponent而不使用SharedComponent这样的扩展程序:

export class AppComponent implements OnInit {

constructor(){
}

但仍然会产生同样的问题。

1 个答案:

答案 0 :(得分:7)

Angular认为没有必要在Router级别注入Module,在加载至少一个组件后注入Router是合理的。我怀疑至少有一个服务必须注入Router,这会提供给加载的Module,这会导致此错误。您可以做的是将使用Router的服务注入应用程序组件,因此首先加载至少一个组件,并且所有子组件将从应用程序组件继承该服务。