zone.js:344 Unhandled Promise rejection : Échec du chargement de app.template.html dans angular2

Question

App.component.ts

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

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

et dans app.template il y a du texte. Si on ajoute le même texte que le modèle dans le fichier typescript, cela fonctionne. La même chose se produit si l'on ajoute le texte dans le html et que l'on appelle le html comme URL du modèle, cela ne fonctionne pas.

Answer 1

Mise à JOUR

Selon Angulaire 2 Docs change-log

Toute mention de moduleId supprimé. "La composante relative chemins" livre de recettes supprimé (2017-03-13)

Nous avons ajouté une nouvelle SystemJS plugin (systemjs-angular-loader.js) pour notre recommandé SystemJS de configuration. Ce plugin convertit de façon dynamique "la composante relative" les chemins de templateUrl et styleUrls absolues les chemins d'accès" pour vous.

Nous vous encourageons fortement à vous d'écrire uniquement des composants-les chemins d'accès relatifs. Que est la seule forme de l'URL abordées dans ces documents. Vous n'avez plus besoin de écrire @Composant({ id module: module.id }), ni de vous.

angulaire de démarrage rapide

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

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

angulaires-cli

changelog de la version 1.0.0-rc.4 (2017-03-20)

Pour s'aligner avec @angulaire/comportement du cœur, tous les templateUrl et styleUrls sont désormais traités comme des relatives, les développeurs doivent utiliser l' ./foo.html dans tous les cas.

Voir aussi

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

VERSION PRÉCÉDENTE

Par défaut, vous devez spécifier le chemin d'accès complet retour à la racine de l'application. Il est absolu à l'égard de la racine de l'application.

Pour votre cas, il peut être:

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

Si vous souhaitez spécifier le modèle et l'Url du style par rapport à leur classe de composant fichiers, vous devez définir moduleId de la propriété de décorateur de votre composant:

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

Si vous utilisez SystemJS, alors il devrait être __moduleName variable à la place de l' module.id variable:

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

Voir également plus de détails:

• 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

a travaillé pour moi comme ça, si vous avez défini dans les dossiers internes

 @Component({

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

Answer 3

Résolvez cette erreur en ajoutant simplement module.ts dans le fichier typescript de ce composant.

Mon fichier de composant est de code

@Component ({moduleId: module.id, <--- ajoute cette ligne dans le sélecteur de fichier de votre composant: 'items', templateUrl: './ items.component.html'})

Answer 4

L'ajout de moduleId: module.id à la déclaration @component a fonctionné à mon avantage.

Exemple pour un composant situé dans 'app / login / login.component.ts':

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

Answer 5

Ma réponse peut ou peut ne pas aider. Mon composant ressemblait à ceci:

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

J'ai écrit ce composant à la main et comme habitude d'écrire jsons, j'ai utilisé des guillemets doubles entre selector et templateUrl et j'ai eu le même problème. Après avoir supprimé les guillemets doubles, le problème avait disparu.