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

UPDATE

根据Angular 2 Docs change-log

所有提到的moduleId都被删除了."组件相对路径"菜谱 已删除(2017-03-13)

我们在我们推荐的SystemJS配置中添加了一个新的SystemJS插件(systemjs-angular-loader.js).此插件动态地将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和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