routerLink change in Angular 16

Question

When using angular < 16, I used to have this routes configuration:

{
  path: Section.Security,
  canActivate: [AuthGuard, AccessGuard, AdminGuard],
  children: [
    {
      path: '',
      pathMatch: 'full',
      redirectTo: 'administrators'
    },
    {
      path: '',
      outlet: 'left-menu',
      canActivate: [AuthGuard],
      loadComponent: () => import('@app/components/left-menu/left-menu.component').then(m => m.SecurityLeftMenuComponent)
    },
    {
      path: 'administrators',
      canActivate: [AuthGuard],
      loadComponent: () => import('@app/pages/security/security.page').then(m => m.SecurityHomePage)
    },
    {
      path: 'contributors',
      canActivate: [AuthGuard],
      loadComponent: () => import('@app/pages/security/security.page').then(m => m.SecurityHomePage)
    },
    {
      path: 'readers',
      canActivate: [AuthGuard],
      loadComponent: () => import('@app/pages/security/security.page').then(m => m.SecurityHomePage)
    }
  ]
}

And, in the SecurityLeftMenuComponent, I had simple links to sub routes like:

<a class="item"
   routerLinkActive="active"
   routerLink="administrators">
   <rn-key name="security::administrators" />
</a>

It was working very well but since I updated to angular 16, the links generated by routerLink now have a different format: "/security/(readers//left-menu:administrators)"

I could fix this by using:

<a class="item"
   routerLinkActive="active"
   routerLink="/security/administrators">
   <rn-key name="security::administrators" />
</a>

But the goal is to have relative links. I tried using "./" but I still have the same issue.

What would be the best way to keep the same behavior as before?

Edit:

As I'm in the process of migrating several applications, I noticed that the issue really occurs when using relative routes. I didn't encounter any issue in the absolute route of the other applications

Radioman

Answer 1

I'm encountering the same issue on my side with @angular/[email protected]. It's linked to this issue : https://github.com/angular/angular/issues/50611

To confirm this, you can test your navigation before the migration (ng 15.x). Navigation works, but if you look at your console, you should see a warning looking like this :

The navigation to /list/(details:item-1) will instead go to /list/(/(details:item-1)//details:item-2) in an upcoming version of Angular. relativeTo might need to be removed from the UrlCreationOptions.

From my understanding, the only workaround available currently is to avoid using relative links and stick with absolute ones.

Woodyard

Answer 2

I am not sure if this fixes your problem, but I made the wollowing work:

<button
  mat-raised-button
  color="primary"
  [routerLink]="['..', 'project-creator']"
>
   Text
</button>

The routes are relative and I can even manage to use '...' to go a level up. What did the trick for me was to import RouterModule in my Standalone Component. Otherwise, the property routerLink does not exist on button, hence you can't bind to it.

For clarity, this is my component that uses these importing

import { Component, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { RouterModule } from '@angular/router';

@Component({
   selector: 'my-selector',
   standalone: true,
   imports: [CommonModule, MatButtonModule, RouterModule],
   templateUrl: './project-overview.component.html',
   styleUrls: ['./project-overview.component.scss'],
})
export class ProjectOverviewComponent {}

I did not need to inject the RouterModule, importing it was enough

Overwrite