Cannot get nested routes in Angular to show up in the view

Question

I am having all sorts of trouble with child/nested routes in Angular 4. In the imports statement in app.module.ts, I have:

    RouterModule.forRoot([
        {
            path: 'templates',
            component: TemplateLandingComponent,
            children: [
                {path: 'main-templates', component: MainTemplateComponent}
            ]
        },
    ])

In my main nav, I have the following:

<li><a [routerLink]="['/templates']" [routerLinkActive]="'active'">Templates</a></li>

This works fine and takes me to the parent TemplateLandingComponent. Then I have another link in the TemplateLandingComponent:

<li><a [routerLink]="['/templates/main-templates']" [routerLinkActive]="'active'">Active Templates</a></li>

Clicking on this link routes to the proper url but does not show my MainTemplateComponent. What am I doing wrong?

Even if I manually navigate to /templates/main-templates I still only see the TemplateLandingComponent

Answer 1

Try

<li><a routerLink="/main-templates" [routerLinkActive]="'active'">Active Templates</a></li>

Change your routes to this

RouterModule.forRoot([
    {
        path: 'templates',
        children: [
           {path: '', component: TemplateLandingComponent}
            {path: 'main-templates', component: MainTemplateComponent}
        ]
    },
])

or insert <router-outlet> in your TemplateLandingComponent. It depends what you want if its 2 separate components write your routerModule that i wrote. It its parent child component use router-outlet in parent component.

routerLink will navigate relative to your current path not absolute path.