Angular named router outlet navigation with routerLink doesn't work

42 views Asked by At

I try to navigate using named router outlet. I have 2 router outlet, the secondary named "siteRoot".

Routing for main router-outlet :

const routes: Routes = [
  {path: '', redirectTo: 'site', pathMatch: 'full'},
  {
    path: 'site',
    loadChildren: ()=>import('./features/shopping-site/shopping-site.module').then(m => m.**ShoppingSiteModule**)
  },
  {
    path: 'admin',
    loadChildren: ()=>import('./features/admin-site/admin-site.module').then(m => m.AdminSiteModule)
  },
  {path: '**', component: PageNotFoundComponent},

];

Routing for secondary (ShoppingSiteModule routing) :

const routes: Routes = [
  {
    path: '',  component: ShoppingSitePageComponent, children: [
      {path: '', pathMatch: 'full', redirectTo: 'home',  outlet: 'siteRoot' },
      {path: 'home', component: HomeNewsComponent,  pathMatch: 'full',  outlet: 'siteRoot'},
      {path: 'items/:categoryType', component: ItemsViewComponent, pathMatch: 'full', outlet: 'siteRoot' },
    ]
  },
];

So,when the application starts my default URL is : http://localhost:4200/site/(siteRoot:home) --> Ok

In my template I use routerLink directive to navigate to items/:categoryType (in secondary router outlet)

   <div>
      <a [routerLink]="[{outlets: {siteRoot: ['items', 'F']}}]">Women</a>
    </div>

When I click, the navigation doesn't work. Im redirected to /site, instead of http://localhost:4200/site/(siteRoot:items/F)

I don't know if the problem is in routing array or routerLink...

Image debug console

Thanks :)

0

There are 0 answers