get the SPA style routing working in an Angular 4 app

In your module for managing the routing....

import { Routes, RouterModule } from '@angular/router';

 
 

...needs to become:

import { Routes, RouterModule, RouterLinkWithHref } from '@angular/router';

 
 

And your menu links like so:

<a href="/reactive">More...</a>

 
 

...need a revamp like so:

<a [routerLink]="['/reactive']">More...</a>

 
 

Yes, that is an array of one thing. That's it however. These two little changes are the only changes you need to make.

{provide: LocationStrategy, useClass: HashLocationStrategy}

 
 

...needs to be at the providers at the outermost module to get the hash tag based routing afloat for servers like IIS which are more cantankerous. Without this change you are just changing out what comes after the slash right after the .com part of the url line. You will need the following import:

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