14

This whole new routes syntaxis sounded to good to be true and now I'm thinking it actually is. I gave up trying to make it work and here I am noticing that not even the main example in the Angular 2 page works. If you open the live example and you try it just clicking it works cool and you can see the path in the url gets changed, but it is only changing the String the path doesn't really exists, if you copy your url and sending it to someone they will get the following error:

{
    "statusCode": 404,
    "error": "Not Found"
}

Hell even if you just refresh the page you will get the same error.

If you want to reproduce the issue open this URL:

https://angular.io/resources/live-examples/tutorial/ts/plnkr.html

Click the "Launch the preview in a separate window" button in the top right of the live preview, wait for it to load the page and when you see the URL changing to something like:

http://run.plnkr.co/KMzM8hkaCyhlnf3b/dashboard

do an F5 to refresh the page and you'll get the error.

Is this a bug, its the way its supposed to work, or something they didn't even try? Are they already starting once again with a bad router implementation or I'm just totally lost on how I'm trying to make it work? Please advice !

I'm guessing I'm better off using the hashtag implementation.

Langley
  • 5,326
  • 2
  • 26
  • 42

2 Answers2

13

In fact, it's normal that you have a 404 error when uploading your application since the actual address within the browser is updating (and without # / hashbang approach). By default, HTML5 history is used for reusing in Angular2.

If you want not having a 404 error, you need to update your server to serve the index.html file for each route path.

This link could help you as well: When I refresh my website I get a 404. This is with Angular2 and firebase.

Hope it helps you, Thierry

Community
  • 1
  • 1
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • Yea I undestand why it happens, that's why I thought it was too good to be true. What I didn't undertand is what was the purpose of using it that way and even worse, defaulting the functionality in that mode. Redirecting to index might make sense IF your app is not client side only and for the looks of it the newest approach for quick apps that use this kin of framework don't implement the backend, they just consume services. Mine doesn't have a backend yet. Nevertheless it's a valid scenario / use case. I'll try it out and if it works I'll accept your answer, thank you =) – Langley Dec 31 '15 at 09:28
  • Yea it seems you can make it work under a specific scenario and configuration that they never specify. I still don't think it should be the default behavior or they should at least tell you about this issue. Thanks for the help Sr.! This one helped too: http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser – Langley Dec 31 '15 at 10:16
  • 1
    @Langley FYI, this is still an open issue under discussion in the `angular2` repo. https://github.com/angular/angular/issues/4735. Ie `HashLocationStrategy` was a necessary hack before browsers included HTML5 `history.pushState()` support. `PathLocationStrategy` is the correct approach going forward but we need better tools to help front-end devs that don't have a lot of back-end knowledge get started. – Evan Plaice Jan 25 '16 at 18:41
  • @Thierry Templier you have mentioned about HTML5 history, does that means it will not work with old browsers? – cracker Jan 02 '17 at 09:50
1

That's as designed (by HTML5 an not introduced by Angular). Either switch to HashLocationStrategy or use a server that knows how to handle (redirect) such requests. See also https://github.com/angular/angular/issues/4735

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 1
    The router was created by Angular, and they default the functionality of it in a way that's buggy without much explanation regarding the issue. That has nothing to do with HTML5 adding the method they are using. – Langley Dec 31 '15 at 09:23
  • 1
    Better documentation is always a good thing, but this is by design of HTML5 and is **not** Angular specific. It would be rather pointless for Angular to add all MDN docs. – Günter Zöchbauer Dec 31 '15 at 09:26
  • The fact that browsers implement that function based on the HTML spec has nothing to do with a Framework using it and even more proposing to use it in an incorrect manner. – Langley Dec 31 '15 at 09:29
  • Just a random selection http://stackoverflow.com/questions/15349648/backbone-pushstate-and-error-404, http://stackoverflow.com/questions/5942350/how-to-cope-with-refreshing-page-with-js-history-api-pushstate – Günter Zöchbauer Dec 31 '15 at 09:31