Zone.js: 344 Unhandled Promise rejection: Не удалось загрузить файл app.template.html в angular2

app.component.ts

import { Component } from '@angular/core';

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

и в app.template есть текст. Если вы добавляете тот же текст, что и шаблон в файле typescript, он работает. То же самое, если добавить в html, а затем вызвать html в качестве URL-адреса шаблона, он не работает.

Ответы

Ответ 1

UPDATE

Согласно Angular 2 Docs change-log

Все упоминания о moduleId удалены. Поваренная книга "Сравнительные пути компонентов" удален (2017-03-13)

Мы добавили новый плагин SystemJS (systemjs- angular -loader.js) к нашему Рекомендуемая конфигурация SystemJS. Этот плагин динамически преобразует "компонент-относительные" пути в шаблонахUrl и styleUrls для "абсолютных пути" для вас.

Мы настоятельно рекомендуем вам писать только пути, относящиеся к компонентам. Что является единственной формой URL, обсуждаемой в этих документах. Вам больше не нужно пишите @Component ({moduleId: module.id}), а также не должны.

Angular быстрый запуск

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 форма во всех случаях.

См. также

ПРЕДЫДУЩАЯ ВЕРСИЯ

По умолчанию вы должны указать полный путь к корню приложения. Он является абсолютным относительно корня приложения.

В вашем случае это может быть:

@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, то вместо переменной module.id должна быть переменная __moduleName:

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

См. также более подробную информацию:

Ответ 2

работал у меня таким образом, если вы определили во внутренних папках

@Component({

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

Ответ 3

Добавление moduleId: module.id в объявление @component помогло мне.

Пример для компонента, расположенного в 'app/login/login.component.ts':

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

Ответ 4

Решите эту ошибку, просто добавив module.ts в этот файл машинописи конкретного компонента.

Файл моего компонента имеет код:

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

Ответ 5

Мой ответ может или не может помочь. Мой компонент выглядел так:

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

Я написал этот компонент вручную, и по привычке писать jsons я использовал двойные кавычки в selector и templateUrl, и у меня возникла та же проблема. После удаления двойных кавычек проблема исчезла.