web-dev-qa-db-fra.com

templateUrl ne fonctionne pas pour moi

J'utilise la structure de graine selon angular.io pour commencer le projet. Tout va bien jusqu'à présent.

Maintenant, je voulais changer le composant supérieur pour avoir une vue à partir d'un fichier séparé et j'ai des ennuis. Le code de travail est:

import {Component, View} from 'angular2/core';
@Component({
       selector: 'my-app',
       template: '<h1>Angular2</h1>',
       directives: []
})
export class AppComponent {
       constructor() {  
       }
}

Ensuite, je change le template en templateUrl comme ceci:

templateUrl: 'app.component.html',

où j'ai dans ce fichier exactement le même code qu'avant

<h1>Angular2</h1>

Cela semble évident de fonctionner, mais ce n'est pas le cas. Il ne génère pas d'erreur mais il n'affiche rien sauf le message 'loading ....' comme dans la démo de démarrage

Merci pour ton aide

Peter

angularangular2-template
7
Peter HIRT

Ajoutez moduleId: module.id dans le décorateur @Component. Si vous ne l'avez pas, alors Angular 2 recherchera vos fichiers au niveau racine.

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  moduleId: module.id,
  templateUrl: 'app.component.html'
})

export class AppComponent { }

Cochez cette article

23
bFunc

Donnez le chemin depuis le répertoire racine. 

4
Rhushikesh

Vous devez écrire le chemin à partir du chemin de construction.

templateUrl: 'build/app.component.html'
4
Raphael

Si vous travaillez avec votre composant 'principal', vous pouvez utiliser (chemin absolu):

'./your_component_name.html'

dans ton cas:

'./app.component.html',

Si autre composant - vous avez deux choix:

  1. comme dit avant - utilisez moduleId
  2. utiliser /app/your_component_html_filename comme exemple /app/dashboard.html ou ./app/dashboard.html
  3. utilisez le chemin complet - pas une bonne idée, mais vous pouvez

À propos de l'utilisation de .css PAS à partir de votre composant 'principal':

  1. utilisez app/your_component_css_filename comme exemple app/dashboard.css sans la première barre oblique '/' !!!
1
Gleb B

utilisez un chemin complet comme app/app.component.html ou un chemin absolu comme ./app.component.html ./ pour le même répertoire 

1
Janak Bhatta

La question ici semble chemin absolu. La composition exige que le chemin absolu soit mentionné. Ceci est ma structure de fichier,

 enter image description here

Ce qui suit ne fonctionne pas, 

@Component({
    selector: 'pm-products',
    templateUrl: 'product-list.component.html',
    styleUrls: ['product-list.component.css']
})

A ma connaissance, le modèle HTML Url ou l'URL de la feuille de style doit être donné en chemin absolu. J'ai essayé le suivant et en travaillant.

@Component({
    selector: 'pm-products',
    //template: `<h3>PRODUCT LISTINGS </h3>`
    templateUrl:'app/products/product-list.component.html'
})
1
Swinkaran

Dans mon cas, j'ai résolu ce problème en ajoutant la propriété moduleid du composant 

@Component({
    moduleId: module.id,
    selector: 'my-app',
    // templateUrl: './app/app.component.html'
    templateUrl:'app.component.html'
})

et cela fonctionne comme prévu. Et j'ai une idée de cette URL: 
https://www.youtube.com/watch?v=WAPQF_GA7Qg&feature=youtu.be

1
Sudhakar singh