0

I'm trying the tutorial Angular2 tutorial, but it doesn't seem to understand the routes after a refresh. The source code can be found on https://angular.io/resources/live-examples/tutorial/ts/plnkr.html

@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <a [routerLink]="['Dashboard']">Dashboard</a>
    <a [routerLink]="['Heroes']">Heroes</a>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['app/app.component.css'],
  directives: [ROUTER_DIRECTIVES],
  providers: [HeroService]
})
@RouteConfig([
  {path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true},
  {path: '/heroes', name: 'Heroes', component: HeroesComponent},
  {path: '/detail/:id', name: 'HeroDetail', component: HeroDetailComponent}
])

What it does is that it replaces the base / by /dashboard but when you refresh the page, I want it to understand that /dashboard === /dashboard and not /, because it thinks that it's the base directory, so the links shows /dashboard/dashboard and the ts are failing to load as they are included in relative way.

Shadoweb
  • 5,812
  • 1
  • 42
  • 55

1 Answers1

1

You need a server that is able to cope with HTML5 pushState
or change the location strategy from PathLocationStrategy to HashLocationStrategy by adding the follogin to your bootstrap()

bootstrap(AppComponent[
  ROUTER_PROVIDERS,
  /* after ROUTER_PROVIDERS */
  provide(LocationStrategy, {useClass: HashLocationStrategy}). 
]);

See also Is Angular 2's Router broken when using HTML5 routes?

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Thanks @Günter Zöchbauer. I didn't solve my problem yet, but it's not related to Angular, but Go, so I will reformulate my question. – Shadoweb Jan 24 '16 at 10:16
  • Your server needs to redirect all requests to index.html as also explained here http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser – Günter Zöchbauer Jan 24 '16 at 10:19