无法在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'
        }
    }
});

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

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

它试图从http://localhost:3000/components/navigator/navigator.component加载它,但它应该从地图’app’加载,ergo：http://localhost:3000/app/components/navigator/navigator.component.js.js扩展将被SystemJS配置中的默认扩展集添加.

在app.component.ts中注释第12行后错误消失的原因是即使navigator.component.ts的import语句仍然保留在代码中,typescript编译器也不会将它添加到实际输出中,因为该类未在当前文件中使用.

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

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

请注意我是如何添加当前文件夹的./

更好的方法是在index.html中添加一个基本的href标记：

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

或者从app文件夹中为您的网站提供服务,使http：// localhost实际引用app文件夹,而不是其父文件夹

原文地址：https://www.jb51.cc/angularjs/142046.html

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

相关推荐