question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

RouterLink: incorrect relative link if defined in component having empty path

See original GitHub issue

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior In the case of such router config with ContainerComponent consuming empty path:

const routes = [
  { 
    path: '', 
    component: ContainerComponent,
    children: [
      { path: 'a', component: AComponent },
      { path: 'b', component: BComponent },
    ]
  }
];

and ContainerComponent having relative links to children in template:

<a [routerLink]="['a']">Link to A</a>     (or  <a [routerLink]="['./a']">Link to A</a>)
<a [routerLink]="['b']">Link to B</a>

RouterLink directive generates incorrect links when user navigated to one of the child component. F.e. if user went to /a route, links would be like that: /a/(a) and /a/(b).

Expected behavior

Relative links should be generated properly: /a and /b.

Minimal reproduction of the problem with instructions http://plnkr.co/edit/Lf2Vfe?p=preview Click on any link. Then you could see that links rendered in AppComponent are correct, but not the ones in ContainerComponent (they both look like /a/(a) and /a/(b)).

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

  • Angular version: 2.2.1
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  • Language: [all | TypeScript X.X | ES6/7 | ES5]

  • Node (for AoT issues): 4.2.1

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:63
  • Comments:50 (12 by maintainers)

github_iconTop GitHub Comments

29reactions
buctwbzscommented, Nov 24, 2016

i think you maybe missed something.read docs,you will get it .

20reactions
furcinocommented, Feb 20, 2017

Hello, I have the same problem. If there is a route localhost/parent/child and I have a [routerLink]="[../sibling]" link, it creates the url localhost/parent/child/sibling instead of localhost/parent/sibling.

The only way to get the desired behavior is to use absolute links, which is undesirable with standalone modules.

The problem occurs only if I use a module with links to sub-modules. For example an authorization module with a login module, sing up module etc. I can not link from the sign up module to the login module without using absolute links. If I change the routing to only use the components (LoginComponent, RegisterComponent) and all these are accessible from the authorization module, the relative links work.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular RouterLink relative path does not work in component ...
Is it possible to fix it so I can relatively go through route without thinking if there are any empty paths? angular ·...
Read more >
RouterLink - Angular
Relative link pathslink · If the first segment begins with / , the router looks up the route from the root of the...
Read more >
Redirect and Alias - Vue Router
When writing a redirect , you can omit the component option because it is never directly reached so there is no component to...
Read more >
In-app navigation: routing to views - Angular
To use the Angular router, an app needs to have at least two components so that it can ... The first property, path...
Read more >
How to Navigate to Previous Page in Angular | Nils Mehlhorn
However, this will only work when the list component is registered as the child with an empty path like I've done in the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found