Uncaught (in promise): Error: Cannot find primary outlet to load 'AchivementComponent'

Question

I'm developing an Angular2 app and, I am stuck in routing configuration. I fallowed official documentation of Routing and Navigation and used them appropriately. It has fallowing routing structure.

-Login Page
-Home Page
   |-Achievement 
   |-Task

I have used auth guard to protect the home page routes. In the home page there are a header and links to navigate through child components. Currently if I click on a link, It loads the whole home page with child component, also gives this error EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'AchievementComponent' I checked everything and it looks correct, but I can't figure out any reason for this.

app-routing.module.ts

..
@NgModule({
    imports:[
        RouterModule.forRoot([
            { path: 'login',    component: LoginComponent },
            { path: 'home',     component: HomeComponent, canActivate [LoggedInGuard], 
                children:[
                    { path: 'achievement', component:AchievementComponent },
                    { path: 'task', component:TaskComponent },
                    { path: '', redirectTo:'achievement', pathMatch:'full' }
                ]
            },
            { path: '',         redirectTo:'home', pathMatch:'full' },
        ])
    ],
    exports:[
        RouterModule
    ]
})
export class AppRoutingModule { }

app.module.ts

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        AppRoutingModule,
        AngularFireModule.initializeApp(firebaseConfig,firebaseAuthConfig),
    ],
    declarations: [
        AppComponent,
        LoginComponent,
        HomeComponent,
        AchievementComponent,
        TaskComponent,
    ],
    providers: [
        UserService, 
        DataService, 
        LoggedInGuard, 
        StorageService
    ],
    bootstrap: [AppComponent],
})
export class AppModule { }

app.component.html file contails only <router-outlet></router-outlet> tag.

home.component.html

<div *ngIf="validUser">
    .......
    <nav>
        <a routerLink="achivement" >Achivement</a>
        <a routerLink="task" >Task</a>
    </nav>
    <router-outlet></router-outlet>
</div>

screen shots

can anyone give a solution

Answer 1

Reason for this error is *ngIf part in home.component.html file. At the beginning validUser variable is false, After validating the user validUser value is changed to true.

Because of this, at the beginning there is no router-outlet to load child components, after validUser value changed to true and if one of the link is clicked both of root component and child components are loaded once.