góc 2: Bootstrap ít nhất một thành phần trước khi tiêm Router

Question

tôi nhận được lỗi này trong ứng dụng RC5 tôi:

Promise từ chối: Bootstrap ít nhất một thành phần trước khi tiêm Router.

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 
    ); 

} 

và cuối cùng shared.component.ts:

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

} 

tôi đã cố gắng sử dụng AppComponent mà không có sự mở rộng từ SharedComponent như thế này:

export class AppComponent implements OnInit { 

constructor(){ 
} 

nhưng điều đó vẫn tạo ra cùng một vấn đề.

Answer 1

Góc nghĩ rằng không cần thiết phải tiêm Router ở mức Module, bạn nên tiêm Router sau khi tải ít nhất một thành phần. Tôi nghi ngờ ít nhất một trong các dịch vụ của bạn phải được tiêm Router, được cung cấp cho số Module được tải, gây ra lỗi này. Những gì bạn có thể làm là tiêm dịch vụ sử dụng Router vào thành phần ứng dụng, vì vậy ít nhất một thành phần được tải trước và tất cả các thành phần phụ của bạn sẽ kế thừa dịch vụ từ thành phần ứng dụng.