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 the url and not get the 404 error?

EDIT: Router Module added

const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'cadastro', component: CadastroNoivosComponent },
    { path: '**', component: HomeComponent }
];

export const routing = RouterModule.forRoot(appRoutes);

Answer 1

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

Answer 2

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 3

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]