Subtilités d'Angular2

#Subtilités d'Angular2

Quelques conseils pour éviter de s'arracher les cheveux avec Angular2...

##Dependency injection

Error: No provider for <Component2>! (<Component1> -> <Component2>)

Déjà, regarde si tu as bien importé <Component2> dans <Component1> en utilisant providers: [<Component2>] et import. Si l'erreur persiste, c'est que <Component2> est appelé par deux composants parents différents. Il faut alors indiquer <Component2> comme un provider pour un parent commun des deux composants appelant <Component2> ou, si <Component2> est global, le mettre dans la fonction bootstrap.

#ngFor

Attention, la syntaxe correcte pour ng-for dans un template est *ngFor="let user of users", contrairement à AngularJS où c'était in...

#Initialisation des champs des classes

Angular2 fonctionne de manière asynchrone, grâce aux Observables et aux Promises. Ainsi le composant UserDetailsComponent possède un champ public user et effectue une requête dont la réponse va remplir le champ : this.user = user. Néanmoins, entre le moment où le composant est initialisé et le moment où la réponse de la requête arrive, this.user == undefined. Or this.user est donné en @Input de ProfileDisplayComponent, et ce dernier essaye d'accéder au champ user.name pour l'afficher. Puisqu'au moment de l'initialisation du composant this.user==undefined, une erreur est soulevée.

Pour pallier à ce problème, on veillera à initialiser le champ : this.user = new User().