Solving the Angular Router Reload Problem

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:

<base href="/">
...all the rest of your tags.

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