relative routing without '/' is appending things to url instead of replacing part of the url

Question

I'm new to angular and i'm trying to understand the routing process with child routes. As described here (https://angular.io/guide/router#milestone-4-crisis-center-feature), i want to have different app-features in separate feature modules with separate routing modules.

Within these routing modules i configured some child routes and i have a navbar (in feature.component.html) with some routerLinks that are relative (without a '/' in the first segment, see https://angular.io/api/router/RouterLink). However this is not working as expected. Instead of switching between localhost:4200/child and localhost:4200/grandchild, it tries to go from localhost:4200/child to localhost:4200/child/grandchild; I would like to understand why this is happening. With an absolute routerLink like '/child' it works; But as far as is understand routing it should also work without the leading slash because the router then checks for children, based on the activated route

taken from the official Angular Doc:

The first segment name can be prepended with /, ./, or ../:

If the first segment begins with /, the router will look up the route from the root of the app.

If the first segment begins with ./, or doesn't begin with a slash, the router will instead look in the children of the current activated route.

And if the first segment begins with ../, the router will go up one level.

feature.component.ts (NgModule only)

@NgModule({
  declarations: [
    FeatureComponent,
    ChildComponent,
    GrandchildComponent
  ],
  imports: [
    CommonModule,
    FeatureRoutingModule
  ]
})

feature.component.html

<div class="border border-primary">
  <h1>feature.component</h1>
  <div>
    <nav class="navbar navbar-expand bg-dark navbar-dark">
      <div class="navbar-nav">
        <a class="nav-item nav-link" routerLink="child">CHILD</a>
        <a class="nav-item nav-link" routerLink="grandchild">GRANDCHILD</a>
      </div>
    </nav>
  </div>
  <router-outlet></router-outlet>
</div>

feature-routing.module.ts(routes only)

const routes: Routes = [
  {
    path: '', component: FeatureComponent, children:
      [
        { path: 'child', component: ChildComponent },
        { path: 'grandchild', component: GrandchildComponent }
      ]
  }
];

app.component.html

<h1>app.component</h1>
<router-outlet></router-outlet>

app-module.ts (NgModule only)

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FeatureModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

on the first load i see the feature component with the navbar. The Url says: localhost:4200
first click on 'CHILD' = The URL changes to localhost:4200/child -->this is ok for now
second click on 'GRANDCHILD', it tries to go to localhost:4200/child/(grandchild), taken from the console output:

NavigationError {id: 32, url: "/child/(grandchild)", error: Error: Cannot match any routes. URL Segment: 'child' at ApplyRedirects.push../node_modules/@angu…}

Why is this happening? how can i output the activated route in the console to understand everything a little bit better?

Vadi Vadi · Accepted Answer · 2019-02-09T14:17:44

first click on 'CHILD' = The URL changes to localhost:4200/child -->this >is ok for now second click on 'GRANDCHILD', it tries to go to >localhost:4200/child/(grandchild)

But in that case activated route is child (after going to localhost:4200/child ), because activated route contains the information about a route associated with a component loaded in an outlet (route child is associated with ChildComponent). Specifying

routerLink="grandchild"

// Or

routerLink="./grandchild"

means that grandchild must be appended to child (activated route). To achieve desired, you need to specify something like this:

// adding / means to go to app root path,
// and FeatureComponent has path: '',
// so it starts from root path
routerLink="/grandchild"

Or:

// adding ../ means go one level up (remove "child")
routerLink="../grandchild"

With an absolute routerLink like '/child' it works;

At the top level, paths that begin with / refer to the root of the application (from Angular Docs). So it goes to the root of application which also works as you want because FeatureComponent has path: '', and is not a child of other component with some path, so it starts from the root.

But as far as is understand routing it should also work without the leading slash because the router then checks for children, based on the activated route

Angular docs says that the router supports directory-like syntax in a link parameters list to help guide route name lookup. So it looks what path to use (relative or absolute) and where to go. If use analogy with directory syntax, current directory is an activated route (child in this case, after going to localhost:4200/child):

routerLink="grandchild" - (relative path) look for grandchild in child directory and go to child/grandchild

routerLink="./grandchild" - (relative path) the same as previous

routerLink="../grandchild" - (relative path) go one directory up from the current directory

routerLink="/grandchild" - (absolute path) look for grandchild in root directory and go to /grandchild

I hope this helps)

relative routing without '/' is appending things to url instead of replacing part of the url

1 Answers