1

I am adding trailing slash in url end in Angular 7, below is the code i found to add trailing slash in angular and its working fine. But when i refresh page it redirect me to 404 component. 

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;

};

I expect to show same component on which i am with trailing slash without 404.

Anil Thakur
  • 75
  • 1
  • 8

2 Answers2

2

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

Darshana
  • 662
  • 1
  • 10
  • 29
  • There is an issue with this solution, if a url without trailing slash is visited it do adds the trailing slash but during that time we already have 404 page not found error, we have to refresh the page manually after that – ahmed Sep 11 '22 at 17:53
1

at your app.routes, add to your Routes:

 Routes = [//your routes....
      {path: '/', redirectTo: 'YOUR_HOME_COMPONENT', pathMatch: 'full'},
     ]

that's should do the trick.

if your'e file server is for example: http://localhost/site/

make sure that when you are building your application, your adding:

ng build --base-href="/site/"

Or Yaacov
  • 3,597
  • 5
  • 25
  • 49
  • for every component i have to add like this? i don't think this will work. – Anil Thakur Jan 16 '19 at 20:50
  • @AnilThakur are you using Angular Router? – Or Yaacov Jan 16 '19 at 21:12
  • yes i am, but the solution you suggest it will redirect every time i refresh page to home, suppose i am on about us page, so if i refresh page i should remain on same page with trailing slash, example -: http://localhost:4200/aboutus/ – Anil Thakur Jan 16 '19 at 21:18