How I can add trailing slash to the end of url for specific component? (My client requires it, so no need to add a comment saying; don't use trailing slash).
Thanks in advance.
1
-
I guess you need a custom angular.io/docs/ts/latest/api/router/index/…Günter Zöchbauer– Günter Zöchbauer2017-02-28 13:39:55 +00:00Commented Feb 28, 2017 at 13:39
Add a comment
|
2 Answers
You can achieve the desired result by defining your routes with a trailing slash and then making sure to navigate to the url with the slash. It will most likely result in a few headaches because the router will be one level deeper than you would expect because of the trailing slash.
Routes{
path: 'a/',
component: AComponent
},
{
path: 'list/b/',
component: BComponent,
}
You can get the router to add the trailing slash by adding an empty string path after the defined route. If you write the slash yourself, like [routerLink]="['/a/']" angular will remove it.
<p><a [routerLink]="['/a', '']">Component A</a></p>
or
<p><a [routerLink]="['../a', '']">Component A</a></p>
this.router.navigate(['/a', '']);
Demo
Comments
You can try to implement a custom UrlSerializer. It could look something like this:
import { DefaultUrlSerializer, UrlTree } from '@angular/router';
export class CustomUrlSerializer extends DefaultUrlSerializer {
parse(url: string): UrlTree {
return super.parse(url);
}
serialize(tree: UrlTree): string {
let url = super.serialize(tree);
url = url.length > 1 ? url += '/' : url;
return url;
}
}
Then provide it in your NgModule:
@NgModule({
declarations: [
...
],
imports: [
...
],
providers: [...
{provide: UrlSerializer, useClass: CustomUrlSerializer}
],
bootstrap: [...]
})
export class AppModule { }
answered Feb 28, 2017 at 15:39
Fredrik Lundin Grande
8,2561 gold badge32 silver badges36 bronze badges
2 Comments
Aviad P.
Perfect, minimally intrusive solution. This resolves the problem with Azure hosted Angular routes which contain a dot character in their route parameters that break when a refresh is requested. Azure gets confused by a url which contains a dot followed by some alphanumeric characters, unless there is a trailing slash at the end of the path.
Aviad P.
I would slightly improve the code by changing the line to
url = url.length > 1 && !url.endsWith('/') ? url += '/' : url;