I get this error in my RC5 app:
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:
@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
);
}
and finally shared.component.ts:
constructor(
protected _feedbackService: FeedbackService,
protected _loggerService: LoggerService,
protected _translateService: TranslateService,
protected _authService: AuthService,
protected _router: Router
) {
}
I tried using AppComponent
without the extension from SharedComponent
like this:
export class AppComponent implements OnInit {
constructor(){
}
but that still produces the same problem.
You can manually bootstrap your app by using angular. bootstrap() function, for multiple modules.
Every application has at least one Angular module, the root module, which must be present for bootstrapping the application on launch. By convention and by default, this NgModule is named AppModule . After the import statements is a class with the @NgModule decorator.
A bootstrapped entry componentlink Other entry components are loaded dynamically by other means, such as with the router. Angular loads a root AppComponent dynamically because it's listed by type in @NgModule. bootstrap .
The bootstrap property or key of the NgModule decorator specifies which component should be loaded by Angular when the app-level module loads. Angular reads the bootstrap metadata and loads the app-level component, called AppComponent .
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With