Angular 7 does not load html template but url resolves correctly

Question

My code:

const routes: Routes = [{
  path: '',
  component: HomeComponent,
  children: [
    {
      path: '',
      component: ComponentOne,
      outlet: 'homeMainContent',
      pathMatch: 'full'
    },]},

    {
      path: 'list',
      component: ListComponent,
      outlet: 'homeMainContent',
    },

  {
  path: 'auth',
  loadChildren: 'app/auth/auth.module#AuthModule'
}, {
  path: 'admin',
  loadChildren: 'app/admin/admin.module#AdminModule'
}];

When I access the list component the url resolves correctly but the html template doesn't change.

If I put the ComponentOne and ListComponent routes in the same child array like this:

const routes: Routes = [{
  path: '',
  component: HomeComponent,
  children: [
    {
      path: '',
      component: ComponentOne,
      outlet: 'homeMainContent',
      pathMatch: 'full'
    },
    {
      path: 'list',
      component: ListComponent,
      outlet: 'homeMainContent',
    },]},

I get an error

error: cannot match any routes.

How do I solve this:

1. For the template to load with the corresponding url?
2. And how to avoid the error(if possible) when I put the ComponentOne and ListComponent routes in the same child array?

I have seen a couple of answers including this answer but they don't solve my problem.

---

Update: This is my HomeComponent code

<div class="body">
  <div class="box">
    <div class="one"><home-left-content></home-left-content></div>
    <div class="two"><home-main-content></home-main-content></div>
    <div class="three"><home-right-content></home-right-content></div>
  </div>
</div>

and my home-main-content component code looks like this:

<div>
    <router-outlet name="homeMainContent"></router-outlet>
</div>

This same setup works in my admin-routing configuration file. That is why I am confused when I get the errors. I was wondering maybe it is because I have an empty sting as the path or because the homecomponent code exists in the main routing config file?

Answer 1

Thanks to this blog I was able to solve my problem.

I simply named the parent route home and created a home-routing module The code for the main routing module is:

const routes: Routes = [{
  path: '',
  redirectTo: 'home',
  pathMatch: 'full',
  },
  {
  path: 'home',
  loadChildren: 'app/home/home.module#HomeModule'
  },
  {
  path: 'auth',
  loadChildren: 'app/auth/auth.module#AuthModule'
  }, 
  {
  path: 'admin',
  loadChildren: 'app/admin/admin.module#AdminModule'
}];

Path for the home routing module is:

const routes: Routes = [{
  path: 'home',
  component: HomeComponent,
  children: [
    {
      path: '',
      component: ComponentOne, // main home view
      outlet: 'homeMainContent',
    },
    {
      path: 'list',
      component: ListComponent,
      outlet: 'homeMainContent',
    },
    ]},
  ]