Search code examples
angularangular-auxiliary-routes

Angular 15 multiple auxiliary routes in featured module throws warnings

I have 3 router-outlets:

  • primary
  • router-outlet (detail)
  • router-outlet (visited)

All the routes are configured in the featured module 'country'. Click a country on the left side, and you will see the details on the right side, and a 'last visited' log at the bottom. This is only to showcase multiple auxiliary routes, so I am aware that i could accomplish this in many different ways..

clip from the gui: enter image description here

country.routing.module.ts:

const routes: Routes = [
  {path: 'country', component: CountryComponent, children: [
    {path: '', children: [
      {path: '', component: CountryMasterComponent},
      {path: ':name', outlet: 'detail', component: CountryDetailComponent},
      {path: 'messages', outlet: 'visited', component: CountryVisitedComponent}
    
    ]},
  ]},  
];

Calling the detail from the master: <a [routerLink]="['../country', { outlets: { detail: [country.name] } }]">

In the country.detail component:

constructor(private route: ActivatedRoute,
    private router: Router, private apiService: RestApiService) {}
  ngOnInit(): void {
    this.country$ = this.route.paramMap.pipe(
      switchMap((params: ParamMap) =>
        this.apiService.getCountry(params.get('name')!))
    );
    
  }

In the apiService:

getCountry(name: string): Observable<Country> {
    const c$ = this.getAllCountries(false).pipe(map((countries: Country[]) => 
      countries.find(country => country.name === name)!)
    );
    if(c$) {
      this.messageService.addMessage("Fetched county: "+name);
    }
    return c$;
  }
}

Finally inside the messageService:

addMessage(msg: string): void {
  this.messages.push(msg);
  this.router.navigate(['../country', { outlets: {visited: ['messages']}}]);
}

The URL seems fine to me:

http://localhost:4200/country/(visited:messages//detail:Turkey)

and everything works as expected, as you can see from the attached image, however, I get the following warnings in the console, and I can't really find anything on this anywhere:

country-master.component.html:6 The navigation to /country/(detail:Turkey//visited:messages) will instead go to /(detail:Turkey//visited:messages) in an upcoming version of Angular. relativeTo might need to be removed from the UrlCreationOptions.

message.service.ts:23 The navigation to /country/(visited:messages//detail:Turkey) will instead go to /(visited:messages//detail:Turkey) in an upcoming version of Angular.

So the question is - How can I resolve these warnings?

Solution

  • This a just warning that has landed in 15.2 to warn about a breaking change that will happen in v16.

    See this PR for more info.

    This is nothing to do on your side for the moment !