Angular router looking for outlet before app component created

Question

I'm seeing a strange Angular bootstrapping order issue.

The console error Cannot find primary outlet to load 'DashboardComponent' appears when there's clearly a in the main AppComponent. Logging in the constructor, that error is happening before AppComponent is constructed. If I add a canActivate guard that returns an async Observable with a delay, AppComponent renders first and everything works.

What could be causing the router to look for the outlet before AppComponent has been created?

// AppComponent

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: '',
})
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 {
        // "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);

Angular router looking for outlet before app component created

1 Answers