Angular router looks for an exit before app component is created
I see a strange loading issue when loading Angular.
The console error Cannot find primary outlet to load 'DashboardComponent'
appears when AppComponent
there is clearly in the main <router-outlet>
. Entering the constructor, this error occurs before AppComponent
. If I add a guard canActivate
that returns an asynchronous observable with a delay, AppComponent
displays the first and everything works.
What could cause the router to look for an exit before it AppComponent
was created?
// AppComponent
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: '<router-outlet></router-outlet>',
})
export class AppComponent {
constructor() {
console.log("AppComponent");
}
}
// AppRoutingModule
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuardService } from './auth/shared/auth-guard.service';
import { DashboardComponent } from './dashboard/dashboard.component';
const routes: Routes = [
{
path: ':projectId',
component: DashboardComponent,
canActivate: [AuthGuardService],
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
providers: []
})
export class AppRoutingModule { }
// AuthGuardService
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { Observable } from 'rxjs/Rx';
@Injectable()
export class AuthGuardService implements CanActivate {
canActivate(): Observable<boolean> | boolean {
// "Cannot find primary outlet..." error with this:
return true;
// Works if above replaced with this:
// return Observable.of(true).delay(1);
}
}
// AppModule
import ...
@NgModule({
declarations: [
AppComponent,
DashboardComponent,
...
],
imports: [
StoreModule.provideStore(reducer),
BrowserModule,
FormsModule,
HttpModule,
RouterModule,
AppRoutingModule,
...
],
providers: [
AppRoutingModule,
],
bootstrap: [AppComponent]
})
export class AppModule { }
// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/';
platformBrowserDynamic().bootstrapModule(AppModule);
source to share
This turned out to be the culprit, hidden in the effects file in the module:
$this.projectStore.store.select(this.projectStore.selectors.getCurrentId).subscribe(objectId => {
if (objectId && this.projectStore.appState.authModule.auth.authenticated) {
this.router.navigate([objectId]);
}
});
This resulted in a call router.navigate
as soon as the module was imported. Boom!
source to share