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

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

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

app.component.html

<div id="map">
    <navigator></navigator>
</div>

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

<input type="text">

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扩展,但我不知道它是如何发生的.

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

如果您想完全体验该错误,请转到项目的回购(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'
        }
    }
});

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

import {NavigatorComponent} from './../components/navigator/navigator.component'

<base href="http://localhost/app/">