Globally changing Angular root route without changing routerLinks

Question

Currently I have routes set up something like

const routes: Routes = [
  {path: "", redirectTo: "route1", pathMatch: "full"},
  {path: "route1", children: [
    {path: "", redirectTo: "subRoute1", pathMatch: "full"},
    {path: "subRoute1", component: SubRouteComponent}
  ]}
]

Which redirects to {domain}/route1/subRoute1 with accessing just {domain}.

Then in my components I have something like

<a [routerLink]="['/route1/subRoute1']">Link</a>

=============================

MY PROBLEM:

=============================

I want to add a new root url path to the entire app that is applied to all routes, but I don't want to have to go change all [routerLink] instances to point to this new path.

So for example, I want to change the routing like so, where site1 is the new root url path:

const routes: Routes = [
  {path: "", redirectTo: "site1", pathMatch: "full"},
  {path: "site1", children: [
    {path: "", redirectTo: "route1", pathMatch: "full"},
    {path: "route1", children: [
      {path: "", redirectTo: "subRoute1", pathMatch: "full"},
      {path: "subRoute1", component: SubRouteComponent}
    ]}
  ]}
]

And then I'd have to change routerLinks to

<a [routerLink]="['/site1/route1/subRoute1']">Link</a>

As far as I know, I would have to change all [routerLink] instances in the code to reflect this new url path change, WHICH I'M TRYING TO AVOID.

I could potentially have 100s of [routerLink] references, on top of needing the ability to change that root path often.

The solution I'm trying to work on right now is detecting a "NavigationStart" routing call and modifying the path at that point to prepend the new root path, but I don't think it's going to work like I hoped.

Also, this is another way of handling it: https://angular.io/guide/router#changing-heroes-to-superheroes

But I want to avoid having a bloated routing config.

score 1 · Answer 1 · answered Jan 13 '20 at 16:28

I'm afraid that you can't avoid this. The problem is in how your [routerLink] 's are written. You should use relative navigation, not absolute. Here is how you should rewrite your links, so that you can change your root-level routes without any troubles:

[routerLink]="['../../parent']"
[routerLink]="['../sibling']"
[routerLink]="['./child']"   
[routerLink]="['child']"

score 1 · Answer 2 · answered Jan 13 '20 at 17:28

So what I understand is that you want to seamlessly add another level of hierarchy into your routes array, without having to affect the existing routeLinks inside your entire application.

You'll just have to modify the existing routes array like this

const routes: Routes = [
  {path: "", redirectTo: "site1/route1", pathMatch: "full"},
  {path:"route1",redirectTo:"site1/route1"},
  {path: "site1", children: [
    {path: "", redirectTo: "route1", pathMatch: "full"},
    {path: "route1", children: [
      {path: "", redirectTo: "subRoute1", pathMatch: "full"},
      {path: "subRoute1", component: SubRouteComponent}
    ]}
  ]}
]

So in essence, for the default (empty, domain only) route, we gave the hierarchal redirection using "site1/route1" and for existing routes that start with route1 we created a redirect rule like

{path:"route1",redirectTo:"site1/route1"},

so that existing links don't disturb.

Thanks.

Scot · Answer 3 · 2020-01-21T17:39:08.510

This seems to work well for me.

app-routing.module.ts

export const routePrefix = "site1";
const routes: Routes = [
  {path: "", redirectTo: routePrefix, pathMatch: "full"},
  {path: routePrefix, children: [
    {path: "", redirectTo: "route1", pathMatch: "full"},
    {path: "route1", children: [
      {path: "", redirectTo: "subRoute1", pathMatch: "full"},
      {path: "subRoute1", component: SubRouteComponent}
    ]}
  ]}
]

app.component.ts

import {routePrefix} from "./app-routing.module";
ngOnInit() {
  this.router.events.subscribe((event) => {
    if (event instanceof NavigationStart) {
      if (!(new RegExp(routePrefix)).test(event["url"])) {
        this.router.navigateByUrl(routePrefix + event["url"]);
      }
    }
  });
}

Another option I discovered is just using the --base-href arg with the ng build command. This will only work if you want to globally add a prefix (or domain subdirectory) to all routes

ng build --base-href site1

Globally changing Angular root route without changing routerLinks

3 Answers3