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:

For the template to load with the corresponding url?
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?

how did you make `ComponentOne`? and whats your `home.html`, and `app.html` — Robert, Jan 05 '19 at 09:08
just saw this [named outlets require non empty parent route segment paths in angular-4-4-4.](https://www.bennadel.com/blog/3346-named-outlets-require-non-empty-parent-route-segment-paths-in-angular-4-4-4.htm) I will try to resole my issue with this info and post my answer. If anyone does the same before me kindly post your answer. Thank you. — YulePale, Jan 05 '19 at 22:25

score 0 · Answer 1 · answered Jan 05 '19 at 10:09

app-routing.module.ts

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {PrimiryOneComponent} from './primiry-one/primiry-one.component';
import {PrimiryTwoComponent} from './primiry-two/primiry-two.component';
import {SecondaryOneComponent} from './secondary-one/secondary-one.component';
import {SecondaryTwoComponent} from './secondary-two/secondary-two.component';
import {PrimiryThreeComponent} from './primiry-three/primiry-three.component';
import {SecondaryThreeComponent} from './secondary-three/secondary-three.component';

const routes: Routes = [
  {
    path: '',
    component: PrimiryOneComponent,
  },
  {
    path: 'two',
    component: PrimiryTwoComponent,
  },
  {
    path: 'three',
    component: PrimiryThreeComponent,
  },
  {
    path: '',
    component: SecondaryOneComponent,
    outlet: 'secondary',
  },
  {
    path: 'two',
    component: SecondaryTwoComponent,
    outlet: 'secondary',
  },{
    path: 'three',
    component: SecondaryThreeComponent,
    outlet: 'secondary',
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

app.component.html

<ul>
  <li>
    <a [routerLink]="[{outlets: { primary: null } }]">go to primary-one</a>
  </li>

  <li>
    <a [routerLink]="['two']">go to primary-two</a>
    <!--equal to <a [routerLink]="[{outlets: { primary: 'two' } }]">go to primary-two</a>-->
  </li>

  <li>
    <a [routerLink]="['three']">go to primary-three</a>
    <!--equal to <a [routerLink]="[{outlets: { primary: 'three' } }]">go to primary-three</a>-->
  </li>

  <li>
    <a [routerLink]="{outlets: { secondary: null } }">go to secondary-one</a>
  </li>

  <li>
    <a [routerLink]="{outlets: { secondary: 'two' } }">go to secondary-two</a>
  </li>

  <li>
    <a [routerLink]="{outlets: { secondary: 'three' } }">go to secondary-three</a>
  </li>

  <li>
    <a [routerLink]="[{outlets: { primary: 'two', secondary: 'three' } }]">go to primary-two and secondary-three</a>
  </li>

  <li>
    <a [routerLink]="['']">go to primary-one and secondary-one</a>
     <!--equal to <a [routerLink]="[{outlets: { primary: null, secondary: null } }]">go to primary-one and secondary-one</a>-->
  </li>
</ul>
<router-outlet></router-outlet>
<router-outlet name="secondary"></router-outlet>

Hey this still doesn't work. Just resolves the url with no template — YulePale, Jan 05 '19 at 21:21
@YulePale clone and test this repo and tell me steps to reproduce the problem https://github.com/robertIsaac/angular-multiple-outlets-example — Robert, Jan 06 '19 at 21:44

score 0 · Accepted Answer · answered Jan 10 '19 at 18:15

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',
    },
    ]},
  ]

Angular 7 does not load html template but url resolves correctly

2 Answers2