0

Example of a working code

const routes: Routes = [
  {
    path: '',
    component: WorkstationTemplateComponent,
    children: [
      {
        path: '',
        outlet: 'workstation',
        loadChildren: () => import('./modules/root-content/root-content.module').then(m => m.RootContentModule)
      },
      {
        path: '**',
        component: RouterNotFoundComponent,
      }
    ],
  },
];

Now if I try to add outlet to wildcard, same as previous array index, it does not work, the components all load expect the wild card.

const routes: Routes = [
  {
    path: '',
    component: WorkstationTemplateComponent,
    children: [
      {
        path: '',
        outlet: 'workstation',
        loadChildren: () => import('./modules/root-content/root-content.module').then(m => m.RootContentModule)
      },
      {
        path: '**',
        outlet: 'workstation', // <-- if I add this, error throws a routing not found if I simulate a wrong path
        component: RouterNotFoundComponent,
      }
    ],
  },
];

I might be missing a logic here.

In the first example it somewhat works if I use two router outlets, on which one of them is not named but it is not my goal

The goal is to end up using

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

instead of

        <router-outlet></router-outlet>
        <router-outlet name="workstation"></router-outlet>
Ivan Moroz
  • 269
  • 1
  • 5

1 Answers1

0

Add the wild-card route which handles all other routes not defined in your routing as shown below. Add it as the last property of the Routes.

const routes: Routes = [
  {...},
  {...},
  // Handle all other routes
  {path: '**', redirectTo: ''}
];
Ali Celebi
  • 824
  • 1
  • 10
  • 19