Remove hash(#) in URL Angular 11

Question

I want to remove the # from the URL, but when I remove it, there will be a problem when I deploy it to the server. When the page is refreshed, will get a status of 404.

example

https: // a / user / (works)

https: // a / user / 1 (Not working)

app-routing.module.ts

    @NgModule({
  imports: [RouterModule.forRoot(routes)],
  providers: [
    {provide: LocationStrategy, useClass: PathLocationStrategy} 
  ],
  exports: [RouterModule]
})

app.module.ts

......
providers: [ Location, {provide: LocationStrategy, useClass: PathLocationStrategy}]

Please advise me what should I do.

Guruprasad mishra · Accepted Answer · 2021-02-23 04:59:21Z

8

PathLocationStrategy is the default location strategy of Angular Routing, It should work and resolve your hash(#) problem.

There is no error in your code, double check below points

RouterModule.forRoot(routes, { useHash: true }) //use Hash should not be there
providers: [ // Below line is optional as default LocationStrategy is PathLocationStrategy {provide: LocationStrategy, useClass: PathLocationStrategy} ]

If you are only facing issue in server when deployed, Please check the entry point configuration in the server. It should be index.html file.

NOTE: when using PathLocationStrategy you need to configure your web server to serve index.html (app's entry point) for all requested locations.

Also check the <base href="/"> in index.html and at the backend server, we must render the index.html file according to path.

answered Feb 23, 2021 at 4:59

Guruprasad mishra

6446 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

Remove hash(#) in URL Angular 11

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related