Is Angular 2's Router broken when using HTML5 routes? [duplicate]

Question

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.

Answer 1

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

Answer 2

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