Angular2 Website breaks on refreshing any page other than base URL

Question

I developed an angular2 website in which I implemented angular2 routes and deployed this website after building it in production environment, now when I open this website from its base URL i.e http://urlblocker.net/spotify it works fine. but when I navigate to any other page and refresh that page e.g http://urlblocker.net/spotify/about, it gives following error.

"Not Found, The requested URL /spotify/artist/0C8ZW7ezQVs4URX5aX7Kqx was not found on this server. Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request."

If I simply open about page URL it also prduces same error. How to resolve it???

Answer 1

An Angular2 SPA expects 1 single entry point for the app. Without using hash location strategy any refresh of a "page" that isn't the entry point will result in a 404 (the page doesn't exist on the server).

One way to solve this is by using the HashLocationStrategy as a provider within app.module

providers: [
    {provide: LocationStrategy, useClass: HashLocationStrategy},
    ...
]

Also make sure you have a base href in your index file of / and your import statement within app.module needs to include

import {HashLocationStrategy, LocationStrategy} from "@angular/common";