Angular2 without hash in the url

Question

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

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);

AT82 · Answer 1 · 2017-01-15T16:04:04.820

36

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

edited Jan 15 '17 at 16:04

answered Jan 15 '17 at 14:52

AT82

71,416
24
140
167

2

It's already like this "RouterModule.forRoot(yourRoutesHere)". And if I remove the "{provide: LocationStrategy, useClass: HashLocationStrategy}" I will get the 404 error when I reload the page. – Emilio Weba Jan 15 '17 at 15:02
Updated answer, try with `PathLocationStrategy` – AT82 Jan 15 '17 at 15:13
no lucky with the `PathLocationStrategy`, still getting the 404 error when reloading the page :( – Emilio Weba Jan 15 '17 at 15:28
Okay, then it seems there could be something going on with your routes. Could you add your routing module to your question? – AT82 Jan 15 '17 at 15:29
Routing module added – Emilio Weba Jan 15 '17 at 15:35
In my case It is working on local(ng serve) environment but on the production(ng builld --aot --prod) it is not working. – Nilesh Mistry Sep 19 '17 at 06:50
@EmilioWeba, I have the same issue, did you found any solutions – Nimatullah Razmjo Nov 13 '17 at 19:13
rewrite the url in nginx or .htaccess file – Shikha Jan 23 '20 at 12:12

score 9 · Accepted Answer · edited Jul 11 '17 at 06:06

9

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.

edited Jul 11 '17 at 06:06

Shabbir Dhangot

8,954
10
58
80

answered Jan 15 '17 at 15:46

duke636

742
2
6
12

is it intented to have both links to same page? – Juan José Ramírez Mar 13 '19 at 15:27
i dont wanth to use useHash. Then how to i solve this issue – Velusamy Venkatraman Sep 24 '19 at 11:21

score 4 · Answer 3 · answered Jun 02 '20 at 15:55

4

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]

answered Jun 02 '20 at 15:55

Sanchit

51
1
4

This is actually a very great answer. It helped me a lot. I did not use however the first rule. Is it necessary? – Radu Ionescu Oct 10 '20 at 20:09
it's depends upon your language you are using! Above code was for Angular 9 – Sanchit Jan 03 '21 at 18:59

Angular2 without hash in the url

3 Answers3

Linked

Related