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 Docs change-log

  

删除了所有提及的moduleId。 ＆＃34;组件相对路径＆＃34;食谱   已删除（2017-03-13）

     

我们为我们添加了一个新的SystemJS插件（systemjs-angular-loader.js）   推荐的SystemJS配置。这个插件动态转换   ＆＃34;组分相对＆＃34; templateUrl和styleUrls中的路径为＆＃34;绝对值   路径＆＃34;对你而言。

     

我们强烈建议您只编写与组件相关的路径。那   是这些文档中讨论的唯一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

angular-cli

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

  

与@ angular / core行为对齐，所有templateUrl和styleUrls   现在被视为相对 - 开发人员应该使用./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

如果您在内部文件夹中定义

，

就像这样为我工作

viewBox

Answer 3

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

位于＆＃39; app / login / login.component.ts＆＃39;中的组件示例：

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

Answer 4

只需在该特定组件打样文件中添加module.ts即可解决此错误。

我的组件文件是代码

@Component（{     moduleId：module.id，＆lt; ---在组件文件中添加此行     选择器：＆＃39; items＆＃39;，     templateUrl：＆＃39; ./ items.component.html＆＃39; }）

Answer 5

我的回答可能有所帮助。我的组件看起来像这样：

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

我手工编写了这个组件，并且作为编写jsons的习惯，我最终在selector和templateUrl中使用了双引号，我得到了同样的问题。 删除双引号后，问题就消失了。