Why won't child component render in parent's router-outlet when paths are empty?

1
votes

I'm new to Angular, and trying to configure routes. I have routes defined in a FeatureModule, and the feature module is loaded by selector into the app.

My understanding is that an empty path '' will result in the specified component being rendered in its parent's router-outlet. However, that's not what seems to be happening.

Please refer to this Stackblitz demo of the issue: Routing Issue Live Demo

The routes in my FeatureModule are defined as:

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
    {
      path: '',
      component: ChildComponent
    }
]}
];

HomeComponent ("feature home works!") is rendered correctly. I expected ChildComponent to be rendered in HomeComponent's router-outlet, but it is not.

I have added some text above the router outlet to make it easy to visualize where I expect ChildComponent to be rendered:

[feature child should be rendered here]
  <router-outlet></router-outlet>

Can someone help me understand why ChildComponent is not rendering?

Thanks!

(P.S. I have added some divs and CSS to the components and router-outlets in Stackblitz to better visualize them).

2
angularangular-routing

2 Answers

1
votes

Anytime there is a children array in a feature module's routing-module, you would need to have at least two router outlets - one for the parent to be injected in (at the app level), and one for its children to be injected in.

As you noted, your home component is injected into the app using its selector. In this scenario, you don't need it appearing inside any router module as it would get to be injected into the app regardless of what the path would be.

One other thing to note is since you don't have a app-routing.module.ts, in your feature routing module, you need to change the line that says RouterModule.forChild(routes) to forRoot since you need a forRoot first.

Updated plunk - https://stackblitz.com/edit/angular-g8rdev-ng6routing-azv6rp?file=src/app/feature/feature-routing.module.ts

0
votes

You have two components configured for the same path. Try:

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
    {
      path: 'child',
      component: ChildComponent
    }
]}
];