无法在Angular2中找到导入的commponent的模板html

我正在开发一个包含多个组件的Angular2演示.演示引导与AppComponent,我在AppComponent的模板html中导入了其他组件.我成功设置了演示并查看了AppComponent的内容,但未能加载其他组件.

这是我的angular2组件的代码示例

app.component.html

app.component.ts

import {Component, View} from 'angular2/core';
import {NavigatorComponent} from '../components/navigator/navigator.component'

@Component({
    selector: 'app'
})
@View({
    templateUrl: './app/app.component.html', 
    directives: [NavigatorComponent]
})
export class AppComponent { }

navigator.component.html

navigator.component.ts

import {Component, View} from 'angular2/core';

@Component({
    selector: 'navigator'
})
@View({
    templateUrl: './components/navigator/navigator.component.html'
})
export class NavigatorComponent { }

当我设置服务器并尝试查看应用程序时,出现以下错误

"NetworkError: 404 Not Found - http://localhost:3000/components/navigator/navigator.component"

和

Error: XHR error (404 Not Found) loading http://localhost:3000/components/navigator/navigator.component
Error loading http://localhost:3000/components/navigator/navigator.component as "../components/navigator/navigator.component" from http://localhost:3000/app/app.component.js

显然,服务器尝试找到navigator.component,但它不存在.但是,当我尝试http:// localhost:3000/components/navigator/navigator.component.html时,我成功看到带有文本框的页面.

所以问题似乎是缺少html扩展,但我不知道它是如何发生的.

我将不胜感激任何解决问题的建议和答案.提前致谢.

如果您想完全体验该bug,请转到项目的repo(https://github.com/haoliangyu/angular2-leaflet-starter)并执行以下步骤:

取消注释public_src/app/app.component.ts中的第12行

设置应用程序

转到localhost:3000并检查错误

更新:

通过阻止SystemJS配置中的其他组件来解决此问题,例如

System.config({
    defaultJSExtension: true,
    packages: {
        'app': {
            format: 'register'
        },
        'components/navigator': {
            format: 'register'
        }
    }
});

这有助于应用程序找到其他组件:)