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);
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="/">
PathLocationStrategyPathLocationStrategy, still getting the 404 error when reloading the page :(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]
