Cannot load files when paste URL manually Angular 2 routing?

Question

I make this routing config

@RouteConfig([
  {
    path:'/profile/:id',name:'Profile',component:ProfileComponent
  },
  // else
  {
    path: '/**',
    redirectTo: ['Home']
  }
])

and used this to navigate Profile with parameter {id:5}

<a [routerLink]="['Profile', {id:5}]" >Go </a>

i added to index.html head this base

<base href="/">

It successfully navigated to

http://localhost:3000/profile/1

and worked fine

but when i paste same URL manual in browser and hit enter it give me this error

Error happen because files are not loaded from root directory

http://localhost:3000

but browser trying to load them form relative URL directory

http://localhost:3000/profile/1

UPDATE: I am using angular 7 now, this kind of problem is fixed without need to add any thing

Answer 1

I solved that problem by adding # to my routes, for example http://localhost:3000/#/profile/1, you can try to do the same. Someone may have better fix for this problem though. Anyway, my solution is adding HashLocationStrategy to AppModule providers:

{ provide: LocationStrategy, useClass: HashLocationStrategy }

Of course, before that, you need to import LocationStrategy and HashLocationStrategy:

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

If you are using RC4 or lower, you add this to your bootstrap method, for example:

bootstrap(
AppComponent,
    [
        { provide: LocationStrategy, useClass: HashLocationStrategy }
    ]);