Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 Remove Hash (#) from the URL

I am trying to remove the # sign from the url in Angular 2 but I couldn't find any good explanation about how to remove it without generate any problem.

I remember on AngularJS 1 it was easier adding $locationProvider.html5Mode(true);

Also I would appreciate if you can tell me if this is a good practice (removing #) or could affect the SEO for the application (or improve it).

PS: I am using Angular 2 with typescript

like image 265
jorgevasquezang Avatar asked Jan 17 '17 01:01

jorgevasquezang


People also ask

What is hash in URL angular?

To enable HashLocationStrategy in an Angular application we pass {useHash: true} when we are providing our routes with RouterModule , like so: Copy RouterModule. forRoot(routes, {useHash: true}) URL can contain some data prepended with a # character. The # part of the URL is called the hash fragment.

What is HashLocationStrategy?

A LocationStrategy used to configure the Location service to represent its state in the hash fragment of the browser's URL.

Which angular package is used to route to URL?

Generate an application with routing enabledlink The following command uses the Angular CLI to generate a basic Angular application with an application routing module, called AppRoutingModule , which is an NgModule where you can configure your routes.


1 Answers

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

like image 70
seidme Avatar answered Sep 25 '22 12:09

seidme