无法在 Angular 2 中找到导入组件的模板 html

Question

我正在开发一个包含多个组件的 Angular2 演示。该演示使用 AppComponent 进行引导，我在 AppComponent 的模板 html 中导入了其他组件。我成功设置了demo并看到了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 扩展，但我不知道它是怎么发生的。

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

---

如果你想完全体验这个bug，请到项目的repo (https://github.com/haoliangyu/angular2-leaflet-starter) 执行以下步骤：

1. 在 public_src/app/app.component.ts

中取消注释第 12 行

2. 设置应用程序

3. 转到localhost:3000并检查错误

---

更新：

这个问题是通过抵抗 SystemJS 配置中的其他组件来解决的，比如

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

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

Answer 1

问题不在于找不到模板文件。但它无法加载navigator.component.js。

它正在尝试从http://localhost:3000/components/navigator/navigator.component 加载它，但它应该从地图“app”加载，即：http://localhost:3000/app/components/navigator/navigator.component.js。 js 扩展名将由 SystemJS 配置中设置的默认扩展名添加。

在app.component.ts 中注释第 12 行后错误消失的原因是即使 navigator.component.ts 的导入语句仍保留在代码中，打字稿编译器不会将其添加到实际输出中，因为当前文件中没有使用该类。

我无法安装您的项目，因为您似乎已经对其进行了一些更改。但我相信解决此问题的方法是更改​​ navigator.component 在 app.component.ts 内的导入位置：

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

注意我是如何在当前文件夹前面添加./

---

最好在 index.html 中添加一个基本的 href 标签：

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

或者从app 文件夹为您的网站提供服务，这样http://localhost 实际上是指应用程序文件夹，而不是其父文件夹