Angular 6 nested children routing not rendering view

Question

I am stuck in a place where the navigation works, but view is not working basically one component is mapped to two different routes:

Component is example.component.ts

Routes are

http://localhost:4200/manager/nav/example

http://localhost:4200/nav/valuation

Have two different modules and have there own routes defined

Navigation mecahnism: when user hits manager it loads its own component and then user can navigate to manager>nav and from nav user can naviagte to manager>nav>example

manager.routing.ts

{ path: 'manager', component: ManagerComponent , children:[
 { path: '', component: PortfolioManagerComponent },
 { path: 'nav', component: NavComponent},children: [
  { path: 'example', component: component:ExampleComponent}

] }

] }

http://localhost:4200/manager/nav

http://localhost:4200/manager/nav/example

Route changed but view not render bascially its on manager view not on example view

But when i use the route nav and than hit example it loads the original page and nav has its own module and routing

nav.routing.ts

  { path: 'nav', component: NavComponent, children: [
  { path: '', component: PropertyComponent},
  { path: 'example, ', component:ExampleComponent}
 ]

Showing right views

When i use the route http://localhost:4200/manager/nav/example till http://localhost:4200/manager/nav the view changes and when I naviagte to http://localhost:4200/manager/nav/example the same view remains its is not loading the view but route changes

You can see first two Images to view the routing and last two images the right view

Answer 1

I believe your problem is you use Angular's default path matching strategy, which is prefix. It means that Angular will use the first route it finds in your router module that starts with the specified segment of your route. And an empty path is a special case as all paths starts with an empty path. So in this example nav and example both start with an empty path and Angular will navigate to the component that is associated with empty path and that is PortfolioManagerComponent.

{ path: 'manager', component: ManagerComponent , children:[
 { path: '', component: PortfolioManagerComponent },
 { path: 'nav', component: NavComponent},children: [
  { path: 'example', component: component:ExampleComponent}

] }

What you need to do is changing your matching strategy to full by adding the pathMatch attribute to your route:

{ path: 'manager', component: ManagerComponent , children:[
    { path: '', pathMatch: 'full', component: PortfolioManagerComponent },
    { path: 'nav', component: NavComponent},children: [
    { path: 'example', component: component:ExampleComponent}

    ] }

More info in the docs: https://angular.io/api/router/Routes#matching-strategy