How to add trailing slash in URL in angular 7 without 404 issue on refresh?

Question

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.

Did you try adding a route "**" and have a component handle that/ — Aragorn
– Aragorn, Commented Jan 16, 2019 at 20:27
yeah i try that '**' but this route i used for 404, means it will redirect to 404 component — Anil Thakur
– Anil Thakur, Commented Jan 16, 2019 at 20:49
@Darshana below is the solution which i accept as answer, its working — Anil Thakur
– Anil Thakur, Commented Apr 16, 2019 at 19:29

Darshana · Accepted Answer · 2019-03-06 10:34:21Z

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

edited Mar 6, 2019 at 10:34

answered Mar 6, 2019 at 7:32

Darshana

7501 gold badge10 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ahmed Over a year ago

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

Or Yaacov · Accepted Answer · 2019-01-16 21:19:27Z

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/"

edited Jan 16, 2019 at 21:19

answered Jan 16, 2019 at 20:36

Or Yaacov

3,9205 gold badges29 silver badges55 bronze badges

3 Comments

Anil Thakur Over a year ago

for every component i have to add like this? i don't think this will work.

Or Yaacov Over a year ago

@AnilThakur are you using Angular Router?

Anil Thakur Over a year ago

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 -: localhost:4200/aboutus

Collectives™ on Stack Overflow

How to add trailing slash in URL in angular 7 without 404 issue on refresh?

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related