Search code examples
angularangular-router

Parent component removed when child routing happens in angular 4

i am working on a child route in my app like below. enter image description here

In this constant section should always be there even when child route happens. code sample i have produced here. When i click on a page, the constant section gets removed. How do i make in available always, i need the same folder structure. I don't want to move the <app-constant></app-constant> the app html file.

https://stackblitz.com/edit/angular-4-childrouting-issue?file=index.html

Solution

  • You created here three routes on the same level, so there are no child routes in fact. Your forChild(routes) is just a way of importing routes from other modules.

    This is how you create child routes

      { path: ''      ,
    component:  DefaultComponent,
    children: [
       { path: 'page1', component: Page1Component},
       { path: 'page2', component: Page2Component}
    ]
  },

    Your current router-outlet is good for the parent level, You'll need a second router-outlet inside DefaultComponent

    <app-constant></app-constant>
<router-outlet></router-outlet>
<app-landing></app-landing>