Angular 8 Cannot match any routes on secondary(named) outlet of lazy loaded module

Question

Angular 8 Cannot match any routes on secondary(named) outlet of lazy loaded module

Hi all,

Yes, this question considered a duplicate question. I have read the discussion from here Angular 5 Cannot match any routes on named outlet of lazy loaded module

and I have followed this example https://stackblitz.com/edit/angular-material-dialog-issue-resolved?file=app%2Fdemo%2Fbuyer-pin%2Fbuyer-pin.component.ts to do the routing in mat dialog.

Howerver, In my case, the named route can't be match as Error screeen below:

What I am doing:

in app.routing: it is navigating (new-equote)

const routes: Routes = [
{
    path: '',
    loadChildren: () => import('./views/dashboard/dashboard.module').then(m => m.DashboardModule)
},
{
    path: 'new-equote',
    loadChildren: () => import('./views/new-equote/new-equote.module').then(m => m.NewEquoteModule)
}
];

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

In new-equote.routing, I am routing to another child module (product-journey):

      const routes: Routes = [
    {
      path: '',
      component: NewEquoteComponent,
      children: [
        {
          path: 'product-selection',
          component: ProductSelectionComponent,
        },
        {
          path: 'product-journey',
          loadChildren: () => import('./product-selection/product-journey/product-journey.module').then(m => m.ProductJourneyModule)

        }
      ]
    }
  ];

  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })

Finally, in the product-journey routing module, I am redirecting to a empty component which open the dialog as per the example I am following (link is given above):

      const routes: Routes = [
    {
      path: '',
      redirectTo: '/new-equote/product-journey/dialog(step:product)',
      pathMatch: 'full'
    },
    {
      path: 'dialog',
      component: ModalContainerComponent
    },
    { path: 'product', outlet: 'step', component: ProductDetailsComponent },
    { path: 'coverage', outlet: 'step', component: CoverageDetailsComponent },
  ];

This is how I am passing the name inside router-outlet :

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

here is the empty component (dialog container) to call the dialog open fucntion:

        constructor(
      private router: Router,
      private route: ActivatedRoute,
      private dialog: MatDialog,
      public store: Store, ) {
        this.openDialog();
    }
    openDialog() {
      const dialogRef = this.dialog.open(ProductJourneyComponent);
    } 

Once I want to navigate to /new-equote/product-journey/dialog(step:product),

error comes: Error: Cannot match any routes. URL Segment: 'product'

I have spent couple of hours to fix this but no luck.