Angular 6 How to initialize auxiliary routes within a lazy loaded module

Question

I'm working on a big application with angular, my problem is that i'm trying to make a wizard (as in step 1: fill this form, step 2: confirm your data, etc) with auxiliary route, my problem is that i don't know how to initialize the:

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

with a predefined child route.

this is my routing.module.ts

import { AdminOutsourceComponent } from './admin-outsource.component';
import { OutsourceComponent } from "./outsource/outsource.component";

    const routes: Routes = [


       {
        path: '',
         component: AdminOutsourceComponent,

        children: [
             {
                path: ' ',
                redirectTo:'outsourcing'
              } ,
             {
                path: 'outsourcing',
                component: OutsourceComponent,
                outlet:'wizard',
                data: {
                  title: ''
                }
              } 
        ]
      }
    ];

also i tried to do it like this:

const routes: Routes = [


         {
            path: '',
             component: AdminOutsourceComponent,

          },
         {
            path: ' ',
            redirectTo:'outsourcing'
          } ,
         {
            path: 'outsourcing',
            component: OutsourceComponent,
            outlet:'wizard'
          } 
];

and

const routes: Routes = [

       {
        path: '',
        redirectTo: 'wizard'
    },

      {
            path: 'wizard',
            children: [
                {
                    path: '',
                    component: AdminOutsourceComponent
                },
                {
                    path: '',
                    component: OutsourceComponent,
                    outlet: 'wizard'
                }
            ]
        }
];

the html template:

<div class="admin-wrapper">   
outsource wizard
  <router-outlet name="wizard"></router-outlet>
</div>

I tried reading the official documentation but nothing is said about this. So far the <router-outlet name="wizard"></router-outlet> it just empty. Here is a small application where i tried to replicate my issue. https://stackblitz.com/edit/angular-auxiliary-routes-cbufsy?embed=1&file=app/lazy/lazy-routing/lazy-routing.module.ts

Note: this is an additional module that i load into my main aplication, not the main module, these submodules are lazyloaded. maybe i'm missing some configuration somewhere.

UPDATE: Looks like a bug, not sure if it's fixed, some people still reporting problems.

Answer 1

Can you try this?

const routes: Routes = [

   {
    path: '',
    redirectTo: 'wizard'
},

  {
        path: 'wizard',
        children: [
            {
                path: '',
                component: AdminOutsourceComponent
            },
            {
                path: '',
                redirectTo: 'outsource',
                outlet: 'wizard'
            },
            {
                path: 'outsource',
                component: OutsourceComponent,
                outlet: 'wizard'
            }
        ]
    }

];