Angular 2：在注入路由器之前引导至少一个组件答案

【问题标题】：Angular 2: Bootstrap at least one component before injecting RouterAngular 2：在注入路由器之前引导至少一个组件
【发布时间】：2016-08-25 14:52:03
【问题描述】：

我在我的 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(){
}

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

【问题讨论】：

标签： angular

【解决方案1】：

Angular 认为没有必要在Module 级别注入Router，在加载至少一个组件之后注入Router 是合理的。我怀疑您的至少一项服务必须注入Router，它提供给加载的Module，这会导致此错误。你可以做的是将使用Router的服务注入到app组件中，这样至少先加载一个组件，你的所有子组件都会继承app组件的服务。

【讨论】：