javascript - TemplateUrl 找不到我的模板

Question

标题组件

import { Component } from "angular2/core";

@Component({
    selector: "header-component",
    templateUrl: "header-template.html"

})

export class HeaderComponent {

}

主要组件

import {Component} from "angular2/core";
import {bootstrap} from 'angular2/platform/browser';

// Components
import { HeaderComponent } from "./header.component";
import {ParametersForm} from './form'

@Component({
  selector: "my-app",
  directives: [ParametersForm, HeaderComponent],
  template: `
    <header-component></header-component>
    <parameters-form></parameters-form>
  `
})

class MainApp {

}

bootstrap(MainApp)
    .catch(err => console.error(err));

问题是找不到 header-template.html

我尝试了以下方法

templateUrl: "header-template"
templateUrl: "header-template.html"
templateUrl: "./header-template.html"

是的，模板与正确导入的其余组件位于同一文件夹中。

有人知道这里的问题吗？

Answer 1

es template is in the same folder as rest of components which get imported correctly

修复

templateUrl 实际上是浏览器加载文件后可以定位该文件的 url。您很可能在浏览器中收到 404 错误。查看那里提出的请求并将其调整到您期望文件所在的位置。

更好的修复

使用您的加载程序将 .html 文件作为 text 内容加载，并将其传递给 template，而不必担心 模板网址