Angular2 Without Hash in The Url

Angular2 without hash in the url

If you use PathLocationStrategy as describe here you can remove the hash in the URL.

But getting rid of 404 error needs some server side tweak. A quick and easy way is to configure your server to load the home page when any URL of the form http://yourhost/* is requested.

Angular 2 Remove Hash (#) from the URL

As @Volodymyr Bilyachat pointed out, PathLocationStrategy is a default location strategy in Angular2, and if the # is present in the url, it must have been that's overridden somewhere.

Beside the module providers, check your module imports, it can also be overridden by providing the { useHash: true } as the second argument of the RouterModule.forRoot:

imports: [
    ...
    RouterModule.forRoot(routes, { useHash: true })  // remove second argument
]

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

Here are configuration examples for some of the popular web servers: https://angular.io/guide/deployment#fallback-configuration-examples

Remove hash(#) in URL Angular 11

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

1. RouterModule.forRoot(routes, { useHash: true }) //use Hash should not be there
2. 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.

Angular 2 - Remove Hash (#) from the URL

You may try for this:

If you are using Angular final, the reasons to the hash could be:

RouterModule.forRoot(yourRoutesHere, { useHash: true })

or Use this:

Beside the module providers, check your module imports, it can also be overridden by providing the { useHash: true } as the second argument of the RouterModule.forRoot:

imports: [
    ...
    RouterModule.forRoot(routes, { useHash: true })  // remove second argument
]

Angular 2 router urls without hash causes problems on refresh

You can switch to using hash:

imports: [
    /* ... */
    RouterModule.forRoot(appRoutes, { useHash: true })
]

To support no-hash urls, the server must be configured to respond with the same index.html file for any requested url.

---

Related Topics