Comprendre la différence entre template et templateUrl (composant)

Le template d’un composant est référencé depuis son décorateur @Component. Il peut être défini dans un fichier externe avec la propriété templateUrl, ou directement dans le décorateur - “en ligne” - avec la propriété template.

Template externe (propriété templateUrl)

Le template se trouve dans un fichier externe. Pratique pour garder la coloration syntaxique dans son éditeur.

// meteo.component.ts
@Component({
  selector: 'app-meteo',
  templateUrl: './meteo.component.html',
})
export class MeteoComponent {}
<!-- meteo.component.html -->
<p>Template du composant</p>

Template en ligne (propriété template)

Le template est placé “en ligne”, directement dans le décorateur.

@Component({
  selector: 'app-meteo',
  template: '<p>Template du composant</p>'
})
export class MeteoComponent {}

Dans ce cas, tout le composant tient dans un seul fichier.

Lequel choisir ?

Mieux vaut utiliser les templates externes (propriété templateUrl), mais le plus important est d’être consistant à l’échelle de tout son projet, et de ne pas avoir certains composants qui utilisent template et d’autres qui utilisent templateUrl.