zone.js:344未处理的Promise拒绝:无法在angular2中加载app.template.html

Question

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'cwf',
  templateUrl: './app.template.html'
})
export class AppComponent {
}

在app.template中有一些文本。若在typescript文件中添加和模板相同的文本，它就可以工作了。同样的道理，如果添加到html中，然后调用html作为模板URL，它就不起作用了。

Answer 1

更新

根据Angular 2文档更改日志

删除了所有提及moduleId的内容。"组件相对路径"烹饪书 已删除(2017-03-13(

我们添加了一个新的SystemJS插件(systemjsangular loader.js(到我们的推荐的SystemJS配置。此插件动态转换templateUrl和styleUrls中的"组件相对"路径到"绝对">

我们强烈建议您只编写组件相对路径。那个是这些文档中讨论的唯一URL形式。你不再需要写@Component(｛moduleId:module.id｝(，也不应该。

角度快速启动

meta: {
  './*.js': {
    loader: 'systemjs-angular-loader.js'
  }
}

https://github.com/angular/quickstart/blob/master/src/systemjs.config.js#L34-L38

角cli

changelog 1.0.0-rc.4(2017-03-20(

为了与@angular/core行为保持一致，所有templateUrl和styleUrl现在被视为相对-开发人员应该使用/foo.html形式。

另请参见

• https://www.bennadel.com/blog/3241-relative-template-and-style-urls-using-system-js-without-moduleid-in-angular-2-4-9.htm

以前的版本

默认情况下，您应该指定返回应用程序根目录的完整路径。它相对于应用程序根是绝对的。

对于您的情况，它可能是：

@Component({
  selector: 'cwf',
  templateUrl: 'app/app.template.html' // or src
})
export class AppComponent {}

如果要指定相对于组件类文件的模板和样式URL，则应将moduleId属性设置为组件的装饰器：

@Component({
  moduleId: module.id
  selector: 'cwf',
  templateUrl: './app.template.html'
})
export class AppComponent {}

如果您使用SystemJS，那么它应该是__moduleName变量，而不是module.id变量：

@Component({
  moduleId: __moduleName,
  selector: 'cwf',
  templateUrl: './app.template.html'
})
export class AppComponent {}

另请参阅更多详细信息：

• https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html
• http://blog.thoughtram.io/angular/2016/06/08/component-relative-paths-in-angular-2.html

Answer 2

这样为我工作，如果你在内部文件夹中定义

@Component({
    selector: 'people-list', 
    templateUrl:'app/component/peopleList/people-list.html'
})

Answer 3

只需在特定组件类型脚本文件中添加module.ts即可解决此错误。

我的组件文件的代码为：

@Component({
    moduleId: module.id,                <--- add this line in your component file
    selector: 'items',
    templateUrl:'./items.component.html'
})

Answer 4

将moduleId: module.id添加到@component声明中对我来说很有用。

位于"app/login/login.component.ts"中的组件示例：

@Component({
  moduleId: module.id,
  templateUrl: './login.component.html'

Answer 5

我的回答可能有帮助，也可能没有帮助。我的组件看起来是这样的：

@Component({
  "selector": "complex-chat-message",
  "templateUrl": "./complex-chat-message.html"
})

我手工编写了这个组件，作为编写json的习惯，我最终在selector和templateUrl中使用了双引号，我也遇到了同样的问题。去掉双引号后，问题就消失了。