2

I'm building an Angular 2 application and I'm using html5 routing. I stumbled across a problem with nested routes. The problem is that when I have /route1 defined, it works fine but in case of /route1/child-route, it is not working.

I use browserSync for serving the files and I use middleware to redirect to index.html. So far I have seen that the problem is with compiled TypeScript files and SystemJS that uses relative urls and for example when app.js is requested, the server is looking for the file in location /route1/app.js. Can anybody help me resolve this problem?

Bryan
  • 747
  • 1
  • 7
  • 19
Kliment
  • 2,250
  • 3
  • 18
  • 32

1 Answers1

3

https://angular.io/docs/ts/latest/guide/router.html

Add the base element just after the <head> tag. If the app folder is the application root, as it is for our application, set the href value exactly as shown here.

<base href="/">

Alternatively add 

import {provide} from 'angular2/core';
import {APP_BASE_HREF} from 'angular2/router';

bootstrap(AppComponent, [
  ROUTER_PROVIDERS, 
  provide(APP_BASE_HREF, {useValue : '/' });
]);

in your bootstrap.

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • is it necessary to provide `APP_BASE_HREF` in bootstrap ? only `base href` in the head tag is't enough ? – Pardeep Jain Feb 04 '16 at 17:43
  • Yes in head is enough, `bootstrap()` is an alternative way of doing it. I allows to determine and set the path at runtime. This is for example used for plunkers where it's run in an iframe with an additional directory in the url. – Günter Zöchbauer Feb 04 '16 at 17:48