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.


Create a .htaccess file Paste the following Code And Upload on your prod Server.

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

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

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

So by removing that could help.

RouterModule.forRoot(yourRoutesHere)

Alternatively if you in your providers (in NgModule) have used:

{provide: LocationStrategy, useClass: HashLocationStrategy}

just remove that.

EDIT, if you need LocationStrategy, try changing HashLocationStrategy to PathLocationStrategy:

{provide: LocationStrategy, useClass: PathLocationStrategy}

More about LocationStrategy here

Now that I have seen your routes as well regarding your 404 issue, you could try changing the following

{ path: '**', component: HomeComponent }

to:

{ path: '**', redirectTo: '', pathMatch: 'full' }

More about routing here

Also check that in your index.html you have set the basehref like so:

<base href="/">