无法在 Angular2 中设置 templateUrl

Question

当我尝试在我的组件中设置 templateUrl 时出现奇怪的错误。

这个有效：

@Component({
    selector: 'buildingInfo',
    template: `
        <html>stuff</html>
    `
})

但是当我这样做时（html-文件中的内容相同）：

@Component({
    selector: 'buildingInfo',
    templateUrl: 'stuff.component.html'
})

输出是这样的：

<span>M</span>
<span>M</span>
<fakediscoveryelement></fakediscoveryelement>
<span>M</span>
<fakediscoveryelement></fakediscoveryelement>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>
<span>M</span>

我不知道为什么会这样。当我尝试在几乎所有其他组件（但不是全部）上为 html 使用单独的文件时，我得到相同的输出。

Answer 1

模板中不能有 <html> 标签。 <html> 是 HTML 文件中的顶级标记，Angular 应用程序只能在 <body> 上或内部使用，并且 <body> 不能包含<html> 标签。

Answer 2

如果您希望 Angular 找到与组件相关的模板，例如你有一个像

这样的结构

应用/

app/app.component.ts

app/app.component.html

确保您设置了组件的模块 ID。这将导致系统加载程序相对于您当前的路径进行查找。否则，它将总是期望完整路径为URL。

SystemJS 示例：

declare var __moduleName: string;
@Component({
    moduleId: __moduleName,
    selector: 'foo-bar',
    templateUrl: 'app.component.html',
})

其他人的例子：

@Component({
        moduleId: module.id,
        selector: 'foo-bar',
        templateUrl: 'app.component.html',
    })

我花了一些时间才得到这个:)

无法在 Angular2 中设置 templateUrl

Unable to set templateUrl in Angular2

html

typescript

asp.net-core

asp.net-core-1.0

angular