CODEWITHSUNDEEP
angularangular-routingangular-router
Jem
Jem

Reputation: 6406

Angular 4 routing: nested child views: "URL segment not found"

edit it works when removing the "name" from my nested outlet AND removing the "outlet" property from the routes module. Is it mandatory to have an unnamed outlet before using named ones?

The following RouterMOdule config is in place:

const appRoutes: Routes = [

  // Public area: login (default)
  { path: '', component: LandingPageComponent,
    canActivate: [AuthAutoRedirectService],
    children: [
      { path: '',       outlet: 'active-box', component: LoginComponent }
    ]
  },

  // Secure area
  { path: 'secure', component: SecureAreaComponent,
    canActivate: [AuthGuardService],
    data: { roles: ['user'] },
    children: [

      // Dashboard (default)
      { path: '',             outlet: 'main-content', component: DashboardComponent },

      // Resolutions
      { path: 'resolutions',  outlet: 'main-content', component: ResolutionsComponent },

      // Documents
      { path: 'documents',  outlet: 'main-content', component: DocumentsComponent },
    ]
  },

];

@NgModule({
  imports:[
    RouterModule.forRoot(appRoutes)
  ],
  exports:[
    RouterModule    // configured router module
  ]
})

the problem arises when trying to access an other child of the secure area:

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'secure/documents'
Error: Cannot match any routes. URL Segment: 'secure/documents'

What could be the cause?

Thanks...

Upvotes: 0

Views: 739

Answers (1)

Jem
Jem

Reputation: 6406

Ok, this explains that: https://github.com/angular/angular/issues/14830

You must have the outlet with the name primary on a template (if you don't specify the name it will be primary by default). Named outlets are auxiliary.

Outlet with name is an "auxiliary" outlet. Needs at least a "primary" (aka "unnamed") outlet.

Upvotes: 0

Related Questions