Sometimes an Angular route will not reload properly, especially on an Apache server. The initial page load is fine, but a page refresh produces a rude and ugly 404. Steps 1 through 4 should solve the issue.
Adding a simple provider will solve this issue.
Just follow these simple steps:
1. In app.module.ts, add the following provider:
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
2. Add the provider to the providers array:
providers: [ItemOne, ItemTwo, {provide:LocationStrategy, useClass:HashLocationStrategy}]
3. Make sure you put the base href tag in your index.html file right below the title. It should look something like:
<head>
<title>NewAng</title>
<base href="/">
...all the rest of your tags.
</head>
4. Build your project with ng build along with the appropriate flags.
Keep in mind, the base href is your project’s root folder. A simple slash implies it’s on the top level of your server. If it’s not on the top level, enter the fully-qualified domain name instead of only a slash.
That should work!
Posted in Front End Development