角度2:在注入路由器之前引导至少一个组件 [英] Angular 2: Bootstrap at least one component before injecting Router

问题描述

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

I get this error in my RC5 app:

承诺拒绝:在注入Router之前引导至少一个组件.

Promise rejection: Bootstrap at least one component before injecting Router.

main.ts:

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

app.module.ts:

app.module.ts:

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

shared.module.ts:

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:

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:

and finally shared.component.ts:

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

}

我尝试使用AppComponent，而没有SharedComponent的扩展名，如下所示:

I tried using AppComponent without the extension from SharedComponent like this:

export class AppComponent implements OnInit {

constructor(){
}

但是仍然会产生相同的问题.

but that still produces the same problem.

推荐答案

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

Angular thinks it is not necessary to inject Router in the Module level, it is reasonable you inject the Router after at least one component is loaded. I suspect at least one of your services must be injecting Router, which is provided to the loaded Module, which causes this error. What you can do is to inject the service that uses the Router to the app component, so at least one component is loaded first, and all your sub-components will inherit the service from the app component.

这篇关于角度2:在注入路由器之前引导至少一个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！