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

Question

我正在开发一个包含多个组件的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扩展,但我不知道它是如何发生的.

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

---

如果您想完全体验该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 配置中设置的默认扩展添加。

在注释第 12 行后错误消失的原因app.component.ts是，即使 the 的 import 语句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