Why are my child routes not shown in nested router outlet?

Question

I am trying to set up a simple Angular application with a fixed frame component, which shows one out of a couple of content components depending on the route - like this:

So, if the route is, for instance, #/a , content A should be displayed, and if it is #/b , content B should be displayed. (Note that this URL structure is a hard requirement. That is, no additional path level is permitted before the content child route.)

I thought I could solve this by having a frame component with a <router-outlet> :

<p>Welcome!</p>

<router-outlet name="content"></router-outlet>

Then, I thought I could specify the content components in child routes:

(from my app.module.ts :)

const routes: Routes = [
  {
    path: '',
    component: FrameComponent,
    children: [
      {
        path: 'a',
        component: ContentAComponent,
        outlet: 'content',
      },
      {
        path: 'b',
        component: ContentBComponent,
        outlet: 'content',
      },
    ],
  },
];
// ...
  RouterModule.forRoot(routes),

For some reason, when I navigate to route /a and /b , the text "Welcome" is displayed, but the content components (whose templates would say "Content A" and "Content B", respectively) appear to be missing.

I have also tried removing the outlet names both in frame.component.html and in the routes, but to no avail.

I have created this on StackBlitz .

What am I missing here?

Answer 1

You are using secondary route but navigating to it by "primary" way xD.

/a, /b is for primary route
(secondary_route_name:path is for secondary route

So in your case, the link should be: url.com/(content:a)