RouterLink: incorrect relative link if defined in component having empty path
See original GitHub issueI’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:
- Created 7 years ago
- Reactions:63
- Comments:50 (12 by maintainers)
i think you maybe missed something.read docs,you will get it .
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.