Angular 2 Page Routing Error

Question

Question

Why cant I refresh on my routed page without getting errors?

Problem

I got an onSelect in my <navigation> directive and try to load my PageComponent into the <router-outlet>. This actually works, you can see that my page is loaded when you click the test navigation link.

In my real code, if I click on it, the url changes to http://localhost:3000/page/10 (10 is just some id, not relevant). If I refresh now on the page I get the errors.

it seems like it searches the .js files on the wrong path /page/node_modules instead of /node_modules/

Errors

GET http://localhost:3000/page/style.css
GET http://localhost:3000/page/vendor.js
GET http://localhost:3000/page/node_modules/es6-shim/es6-shim.min.js
GET http://localhost:3000/page/node_modules/systemjs/dist/system-polyfills.js
GET http://localhost:3000/page/node_modules/angular2/bundles/angular2-polyfills.js
GET http://localhost:3000/page/node_modules/systemjs/dist/system.src.js
GET http://localhost:3000/page/node_modules/angular2/bundles/angular2.dev.js
GET http://localhost:3000/page/node_modules/rxjs/bundles/Rx.js
GET http://localhost:3000/page/node_modules/angular2/bundles/http.dev.js
GET http://localhost:3000/page/node_modules/angular2/bundles/router.dev.js
Uncaught ReferenceError: System is not defined

Setup

I tried to set my example up on plunkr. But I guess you cant really refresh there to test my error exactly.

https://embed.plnkr.co/7P21IbHr8EOuUW7NjmFS/

Is your server configured to support HTML5 pushState? http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser — Günter Zöchbauer, Feb 04 '16 at 10:25
@GünterZöchbauer ty, good link. I kinda searched in the wrong direction. I could fix it temporary with using hashtags, which is probably not the best way. I guess I will try it server side as soon as im leaving my localhost setup :) — NDY, Feb 04 '16 at 11:20

score 1 · Accepted Answer · edited May 23 '17 at 12:02

Could fix it with this answer:

https://stackoverflow.com/a/33573548/753628

The errors are there because the route actually doesnt exist. Therefore we need to use a # in the url.

import {provide} from 'angular2/angular2';
import {
  ROUTER_PROVIDERS,
  LocationStrategy,
  HashLocationStrategy
} from 'angular2/router';

And the bootstrap:

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

This changes my url to http://localhost:3000/#/page/10 which actually doesnt fail if refreshed.

Angular 2 Page Routing Error

1 Answers1