I'm upgrading an Angular application from v10 to v11 that uses routerLink
pointing to the outlet named dialog
to create modal dialogs. The current component (CoreComponent
in the example below) should stay visible when navigating to the modal dialog. For some reason these stopped working in v11, they always redirect to '/'. No exceptions are thrown and other primary links work fine.
I have created a StackBlitz sample from my routing setup with both v10 and v11 package.json files included.
I have tried many suggestions from various blogs and other questions but none helped with my routing. Version 11 of Angular seemingly implemented quite a few fixes related to routing and named outlets but I couldn't find anything specific to my case in the changelog.
The relativeLinkResolution: 'legacy'
option does not help.
I don't think the relativeLinkResolution
is related as stated in this question: Angular RelativeLinkResolution - Differences between legacy and corrected.
From what I read in your StackBlitz demo and do some trial and error:
The problem is on your routes
in core-routing.module.ts. You are using the route '' for directing to the CoreComponent
page. This results in the route always redirecting to '/'.
You must use pathMatch: 'full'
so that the route with '' or '/' only redirects to the CoreComponent
page.
It should be as below:
const routes: Routes = [
{
component: CoreComponent,
path: '',
pathMatch: 'full'
},
];
Besides that, you don't need to import RouterModule
in the AppModule
as it seems to duplicate the purpose in the AppRoutingModule
which will import the RoutingModule
.
@NgModule({
imports: [
BrowserModule,
//RouterModule,
AppRoutingModule,
SharedModule,
CoreModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Updated: If you want to display the CoreComponent
all the time:
CoreModule
instead of redirectTo: '/'
in the app-routing.module.ts.const routes: Routes = [
{
path: '',
pathMatch: 'full',
loadChildren: () => import('./core/core.module').then((m) => m.CoreModule),
},
...
];
pathMatch: 'full'
for the below route in the core-routing.module.ts.const routes: Routes = [
{
component: CoreComponent,
path: '',
},
];