Unprepared (in promise): Error: Unable to find the main outlet for downloading "AchivementComponent"

Question

I am developing an Angular2 application and I am stuck in the routing configuration. I prepared the official documentation for routing and navigation and used them appropriately. It has a simple routing structure.

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

I used auth guard to protect home page routes. The home page has a title and links to navigate through the child components. Currently, if I click on the link, it loads the entire home page with the child component, also gives this error EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'AchievementComponent' I checked everything and it looks right but I can’t understand why.

application-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 { } 

The app.component.html file only refers to the <router-outlet></router-outlet> .

home.component.html

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

screenshots

can someone give a solution

Answer 1

The cause of this error is *ngIf part in the home.component.html file. At the beginning of validUser , false , after checking the value of the user validUser value changes to true .

Because of this, at the beginning there is no router output for loading child components, after the validUser value validUser changed to true , and if one of the links is clicked, both the root component and the child components will be loaded once.

Answer 2

I think you need to move the route path: '', redirectTo: 'achievment' ... to the first position in the child routes, otherwise after the match with the route

  { path: 'achievement', component:AchievementComponent }, 

the router will additionally match

  { path: '', redirectTo:'achievement', pathMatch:'full' } 

Adding pathMatch: 'full' to

  { path: 'achievement', component:AchievementComponent, pathMatch: 'full' }, 

should also work.