Angular: impossible de se lier à ngModel, propriété non connue de input

Pourquoi vous obtenez cette fâcheuse erreur "impossible de se lier à" et comment la résoudre dans toutes ses variantes.

Voici comment résoudre le problème "impossible de se lier à", et pourquoi vous êtes l'obtenir, comment résoudre toutes ses variantes et comment éviter de créer ce problème pour vous-même dans vos projets Angular.

Le correctif pour ce message est assez simple: ajoutez simplement cette ligne en haut de votre fichier de code et le le problème disparaît:

 import   { FormsModule }   from   '@ angular / forms' ; 

Ne vous sentez pas mal quand vous recevez ce message— le message «Can't bind to» est l'une des erreurs les plus courantes auxquelles se heurtent les développeurs Angular (en particulier, bien sûr, les développeurs novices dans Angular). Une recherche rapide sur Google génère plus de 120 appels (et cela après avoir omis toutes les entrées "très similaires"). Le problème est que vous rencontrerez constamment des variations sur ce problème dans deux environnements différents: Angular et JavaScript.

Il y en a d'autres comme ça qui vous attendent

Toutes ces variations sont faciles à reconnaître car elles tombent toutes dans le format «Impossible de se lier à car ce n'est pas une propriété connue de ». Et la réponse est toujours la même: vous ajoutez une instruction d'importation. Malheureusement, les noms qui suivent «import» et «from» changent en fonction du message… et pas de manière évidente.

Tout cela est dû au passage dans Angular 2 à segmenter Angular en plusieurs modules sur lesquels vous pouvez charger une base «au besoin». L’avantage est que vous n’avez pas à charger tout Angular lorsque votre composant n’en a besoin que d’une partie. L'inconvénient est que vous devez utiliser des instructions d'importation pour charger les pièces dont votre composant a besoin. La seule raison pour laquelle l'erreur ngModel est si courante est que ngModel est (probablement) la directive la plus fréquemment utilisée dans Angular et, par conséquent, souvent le premier endroit où les développeurs rencontrent ce problème.

Mais il est cruel de se distinguer. le cadre angulaire. Vous rencontrerez ce problème avec toute bibliothèque JavaScript que vous pourriez utiliser dans votre projet. Il y a en fait deux systèmes en jeu ici: l'importation de Angular NgModules et l'importation de modules JavaScript. Cependant, ils sont très similaires: les modules NgModules d’Angular et les modules JavaScript sont des packages de code qui, aux yeux du développeur qui a créé le package, sont liés d’une certaine manière. En règle générale, si vous utilisez l'un des éléments d'un module, vous en utiliserez probablement d'autres dans le même module.

Construire la bonne déclaration d'importation angulaire

Et – encore, «de même» – vous n'avez pas besoin de faites la distinction entre les systèmes NgModule et JavaScript pour obtenir les modules dont vous avez besoin: Vous utilisez l'instruction d'importation JavaScript pour les deux. Voici deux instructions d'importation, une importation FormsModule depuis le module Angular Forms (ce dont vous avez besoin pour ngModel) et une importation Customer depuis un fichier Types.js dans un sous-dossier avec le chemin resources / SalesOrderApp (un sous-dossier du dossier contenant le fichier avec ces instructions d'importation, c'est-à-dire):

 import   { FormsModule }   from   '@ angular / forms' ; 
 import   { Customer }   from   './ resources / SalesOrderApp / Types' ; 

Dans la déclaration d'importation, la particularité des NgModules réside dans la partie «from» de l'instruction d'importation: les NgModules d'Angular commencent par @angular. Le nom @angular pointe vers vos modules Node.js où que vous les ayez chargés, soit globalement sur votre ordinateur, soit localement dans votre projet.

Mais cela mène simplement à la question principale: comment savoir quoi importer et depuis où? Comment sauriez-vous utiliser FormsModule et @ angular / forms pour obtenir ngModel?

Répondre à cette question est cependant facile. Commencez par consulter la référence Angular API . Cette page vous donne une liste de tous les éléments angulaires que vous voudrez peut-être importer. Cliquez sur ngModel dans cette liste pour accéder à la page de référence de ngModel . En haut de la page, vous trouverez la bibliothèque à partir de laquelle vous devez importer (@ angular / forms, dans ce cas). Sous l'en-tête NgModule de cette page, vous trouverez le nom de l'élément que vous devez importer (FormsModule, dans ce cas). Mettez-les ensemble et vous obtenez la déclaration d'importation dont vous avez besoin:

 import   { FormsModule }   from  ‘@angular  /  forms»

Construire la bonne déclaration d'importation JavaScript

Comme vous l'avez vu, lors de l'utilisation de bibliothèques JavaScript, votre instruction d'importation utilisera, par défaut, un chemin de fichier pointant vers un fichier JavaScript quelque part dans votre projet (bien que l'extension de fichier .js soit omis du chemin). Vous devrez vous référer à la documentation de cette bibliothèque JavaScript pour déterminer le nom de l'élément que vous souhaitez importer et faire attention à l'endroit où vous avez installé la bibliothèque dans votre projet pour obtenir le chemin d'accès.

Si vos fichiers de bibliothèque JavaScript sont profondément imbriqués, ces chemins peuvent devenir «extrêmement longs». Vous pouvez raccourcir ces chemins en ajoutant une section de chemins à votre fichier tsconfig pour spécifier des noms de style @ qui font référence aux noms de chemin de dossier dans votre projet. Vous pouvez ensuite utiliser ces noms de style @ à la place des chemins dans vos instructions d'importation. Vous n'avez qu'à faire une modification: plutôt que d'utiliser un chemin relatif du fichier avec l'instruction d'importation, vous utilisez un chemin relatif à partir de la racine de votre application lors de la définition du nom @ -style.

Dans mon exemple précédent, j'ai utilisé ceci instruction import pour référencer un fichier JavaScript:

 import   { Customer }   from   './ classes / SalesOrderTypes' ; 

Supposons que le fichier avec cette instruction d'importation se trouve dans le dossier de l'application du projet – qui placerait le fichier SalesOrderTypes dans un dossier avec le chemin app / resources / SalesOrderApp / Types à partir de la racine de mon projet. Pour raccourcir cela dans votre composant, vous pouvez ajouter des entrées comme celle-ci à votre fichier tsconfig (celui-ci définit le nom @soTypes comme le chemin vers le dossier app / resources / SalesOrderApp / Types du projet):

 "chemins" [19659008]:   {
       "@ soTypes / *" :   [ "app / resources / SalesOrderApp / Types *" ] 
} [19659009] Et avec cela en place, vous pouvez maintenant utiliser cette instruction d'importation dans n'importe lequel de vos composants pour récupérer ce fichier JavaScript: 

 import   { Customer }   from   '@ soTypes / SalesOrderTypes '; 
 Non seulement cela facilite considérablement l'écriture de vos instructions d'importation JavaScript, mais cela vous permet de modifier la structure des dossiers de votre projet sans avoir à vous soucier de casser vos composants - il vous suffit de mettre à jour le section chemins de votre fichier tsconfig. Vous avez désormais couplé de manière lâche votre code à vos bibliothèques et centralisé la gestion de leurs chemins. C'est, je pense, une bonne chose de toute évidence.