Angular 5 : Allow trailing slash in routes
I added below to your app.module.ts
import {Location, PathLocationStrategy} from '@angular/common';
const _orig_prepareExternalUrl = PathLocationStrategy.prototype.prepareExternalUrl;
PathLocationStrategy.prototype.prepareExternalUrl = function(internal) {
const url = _orig_prepareExternalUrl.call(this, internal);
if (url === '') {
return url;
}
console.log('For ' + internal + ' we generated ' + url);
if (url.endsWith('.html')) {
return url;
}
if (url.endsWith('/')) {
return url;
}
return url + '/';
};
Location.stripTrailingSlash = function (url) {
const /** @type {?} */ match = url.match(/#|\?|$/);
const /** @type {?} */ pathEndIdx = match && match.index || url.length;
const /** @type {?} */ droppedSlashIdx = pathEndIdx - (url[pathEndIdx - 1] === '/' ? 1 : 0);
const first = url.slice(0, droppedSlashIdx);
const last = url.slice(pathEndIdx);
if (first.endsWith('.html')) {
return first + last;
}
return first + '/' + last;
};
And it now works for me with a trailing slash when .html
is not there
Even more improved code (based on code from Umesh).
Add on top of main.ts
:
import { Location } from "@angular/common";
// Prevent stripping of trailing slash
Location.stripTrailingSlash = function stripTrailingSlashNew(url: string) {
return url;
};
Below code worked for me:
export const contactUsRoutes: Routes = [
{
path: 'contact-us/.', component: ContactUsComponent
}
];
. .
<a [routerLink]="['/contact-us/.']">Contact us</a>
And add below code in your main.ts:
import { Location } from '@angular/common';
const __stripTrailingSlash = (Location as any).stripTrailingSlash;
(Location as any).stripTrailingSlash = function _stripTrailingSlash(url: string): string {
const queryString$ = url.match(/([^?]*)?(.*)/);
if (queryString$[2].length > 0) {
return /[^\/]\/$/.test(queryString$[1]) ? queryString$[1] + '.' + queryString$[2] : __stripTrailingSlash(url);
}
return /[^\/]\/$/.test(url) ? url + '.' : __stripTrailingSlash(url);
};
I have referred below link for this solution:
https://stackblitz.com/github/ssatz/Angular5-Preserve-Trailing-Slash