Question

我正在尝试构建一个新的角度2并且我遇到了一个问题，我的组件模板会抛出404错误而我无法为我的生活找出原因。

我可以配置一个组件并指定模板，但由于当前逃避我的原因，我一直看到模板在控制台中被引用为.js文件。

例如，我看到以下错误：

错误：（SystemJS）XHR错误（404 Not Found）loading http://localhost:5000/app/app.html.js wrapFn @ http://localhost:5000/node_modules/zone.js/dist/zone.js:698:34 invokeTask @ http://localhost:5000/node_modules/zone.js/dist/zone.js:265:40 runTask @ http://localhost:5000/node_modules/zone.js/dist/zone.js:154:57 调用@ http://localhost:5000/node_modules/zone.js/dist/zone.js:335:40 从http://localhost:5000/app/app.html.js
将http://localhost:5000/app/app.component.js加载为“app / app.html”时出错

现在我知道我没有app.html.js，但我无法弄清楚为什么angular正在尝试加载不存在的文件。当我知道我明确地将我的模板设置为app.html

时，它只会增加混乱

import { Component } from "@angular/core";
import { Router } from "@angular/router";

const template = require("./app/app.html");

@Component({
  selector: "alerts",
  template: template
})

export class AppComponent {
  constructor(public router: Router) {}
}

非常感谢任何协助。

修改的只是为了排除组件，我还通过删除外部模板并将模板标记直接放入组件中来简化它，我仍然得到相同的结果，angular正在查找既未引用也不存在的文件：

import { Component } from "@angular/core";
import { Router } from "@angular/router";

@Component({
  selector: "alerts",
  template: `<alerts></alerts>`
})

export class AppComponent {
  constructor(public router: Router) {}
}

Answer 1

更简单的方法是使用moduleId:module.id,，因此不需要

@Component({
  moduleId:module.id, // this makes the .html relative to the folder you are in
  selector: "alerts",
  templateUrl: app.html
})

Angular 2 + mvc core：无法加载资源：服务器响应状态为404（未找到）

1 个答案: