angularangular2-routingangular11router-outlet

Angular 11 - Route using named outlet redirects to '/'


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.


Solution

  • 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:

    1. Import the 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),
      },
      ...
    ];
    
    1. Remove pathMatch: 'full' for the below route in the core-routing.module.ts.
    const routes: Routes = [
      {
        component: CoreComponent,
        path: '',
      },
    ];
    

    Demo @ StackBlitz