Typescript 带有angularJS2的导航菜单中的路由器链接路径

我试图用angularJS2创建一个导航菜单。这是我在app.component.ts中看到的：

 import {provide, Component} from 'angular2/core';
    import {APP_BASE_HREF, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, HashLocationStrategy, LocationStrategy, RouteConfig} from 'angular2/router';
    import {bootstrap} from 'angular2/platform/browser';
    import {Router} from 'angular2/router';


// Terrestri
@Component({
    selector: 'terrestri',
    template: '/terrestri.html', // WORKS
})
export class TerrestriComponent { }


// Volatili Component
@Component({
    selector: 'volatili',
    templateUrl: '/volatili.html' --> DOESN'T WORK
})
export class VolatiliComponent { }


// Pesci Us Component
@Component({
    selector: 'pesci',
    template: 'pesci.html' // WORKS
})
export class PesciComponent { }

@Component({
    selector: 'my-app',
    directives: [ROUTER_DIRECTIVES], 

    template: `    
    <nav>
      <ul>
              <li><a [routerLink]="['/Volatili']">VOLATILI</a></li>
              <li><a [routerLink]="['/Pesci']">PESCI</a></li>
              <li><a [routerLink]="['/Terrestri']">TERRESTRI</a></li>
      </ul>
    </nav>
    <router-outlet></router-outlet>
    `,  
})

@RouteConfig([
    { path: '/volatili', component: VolatiliComponent, as: 'Volatili' },
    { path: '/pesci', component: PesciComponent, as: 'Pesci' },
    { path: '/terrestri', component: TerrestriComponent, as: 'Terrestri' }
])

export class AppComponent {}

我无法导航到“templateURL”中定义的“volati”，而我可以成功地转到“pesci”和“Terresti”（它们是在“template”中定义的，而不是在“templateURL”中定义的）

我也尝试过：

templateUrl: './volatili.html' --> DOESN'T WORK
templateUrl: 'volatili.html' --> DOESN'T WORK

几件事：

template: '/terrestri.html', // WORKS, HOW?

模板用于内联html，如：

template: `<div></div>`

DEV在您的示例父目录（top）中吗？尝试：

templateUrl: '/DEV/volatili.html'

您是否在

标记（或

引导（）

中）中有

？不确定，但我认为它在这里起作用。

templateUrl: '/app/volatili.html'

templateUrl: '/DEV/volatili.html'