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 模板与正确导入的其余组件位于同一文件夹中

修复

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

更好的修复

使用您的加载器将.html 文件加载为text 内容并将其传递给template，不要打扰templateUrl