Angular2 without hash in the url

Question

Now, my website\'s url looks like this because I\'m using the approach described here

http://localhost:4200/#/cadastro

Is it possible to remove the hash in t

Answer 1

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.

Answer 2

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]

Answer 3

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