Angulaire: conseils avancés et meilleures pratiques pour les experts et les débutants


J’ai écrit cet article et inclus quelques bonnes pratiques, pièges, informations et ‘ce qu’il faut rechercher’ lors de la création d’une application angulaire. Beaucoup d’entre elles avaient été des expériences personnelles et des leçons apprises à la dure. De plus, il était vraiment difficile de créer cette liste, gardez-la court et Facile car je voulais ajouter des trucs pour les débutants et les experts.

Essayez de suivre ce que recommande Angular: ne faites pas les choses à votre façon

Puisque vous utilisez Angular, vous devez suivre ce que le créateur suggère et ne pas faire les choses à votre façon. Cela vaut pour la plupart des cadres d’opinion, pas seulement angulaires.

Un point de départ incontournable est de lire et de suivre l’angulaire guide de style.

Si vous êtes nouveau sur Angular, commencez par tour des héros

C’est l’un des meilleurs tutoriels avec une très bonne documentation qui m’a beaucoup aidé lorsque j’ai commencé avec angular

Lis le Documentation

le angular.io la documentation est mature et presque complète. En plus de cela, vous devriez vérifier et être à l’aise avec Angular Glossaire.

Aussi, d’autres choses à vérifier.

Envisagez d’utiliser une bibliothèque de composants d’interface utilisateur

Vous pouvez choisir entre Matériel angulaire, primenget bien d’autres qui vous faciliteront la vie

Utilisez update.angular.io lors de la mise à niveau de la version

Vous avez besoin de passer d’une ancienne version à une nouvelle et vous ne savez pas ce qui va casser ou quoi changer? Pas de soucis. Visite update.angular.io, choisissez la version que vous possédez actuellement et la version que vous souhaitez utiliser, puis suivez les instructions. Il comprend également un guide pour le matériau angulaire.

Impliquer

Recherche angulaire rencontres près de votre région.

Connaissez-vous Angular a sa propre Blog?

Découvrez le haut Angular événements.

Aussi, n’hésitez pas à ouvrir / signaler un problème lorsque vous trouvez un problème concernant Angular lui-même ou des bibliothèques tierces. Cela ne fera qu’améliorer les choses

Versioning / package.json, supprimez tous les carets ‘^’ et tilde ‘~’

Si vous voulez que votre application / bibliothèque soit stable et n’échoue pas après quelques mois, vous devriez fortement envisager de supprimer tous les symboles caret et tilde de package.json.

N’acceptez pas aveuglément les dépendances automatiques. Vous ne voulez pas que les gens frappent à votre porte lorsque les choses tournent mal en raison de la mise à jour automatique des dépendances.

Le Web évolue de façon spectaculaire année après année. Essayez d’exécuter npm install sur un projet de 3 à 6 mois, et vous obtenez un avertissement et des messages de dépréciation sans mentionner qu’il y a une chance d’échec de construction.

Si vous souhaitez avoir plus de contrôle sur vos versions, vous pouvez définir

npm config set save-prefix=''

Investissez du temps pour rester à jour

Il est recommandé d’investir du temps une fois tous les 3 à 6 mois et de maintenir vos dépendances à jour. N’oubliez pas qu’un petit avertissement ou avis de dépréciation aujourd’hui deviendra 10 ou 20 avis à l’avenir et entraînera des problèmes plus importants.

Si vous êtes dans la position où vous exécutez Angular 4, la dernière version est 9 et vous devez effectuer une mise à niveau. Eh bien, mauvaise nouvelle pour vous, ce sera un travail difficile et désagréable. Parce que ce n’est pas seulement l’Angular que vous devez mettre à niveau, c’est aussi toutes les dépendances qui comptent.

Utilisez des types au lieu de Any

Évitez d’en utiliser et préférez les types. Utilisez-la s’il n’y a pas d’autre option ou pour des cas particuliers. C’est pourquoi vous utilisez en premier lieu Angular et TypeScript.

Connaissez votre package-lock.json

N’oubliez pas que votre package-lock.json est la source de la vérité

package-lock.json répertorie les versions de dépendance correctes que votre application utilise. Reportez-vous à package-lock pour connaître la version exacte d’une dépendance que vous utilisez.

Par exemple, vous pouvez l’avoir dans votre package.json ‘^ 1.1.1 ‘, mais en runtime, vous utilisez ce‘ 1.2.2 ’

Courir npm ls module-name pour obtenir la version exacte du module.

Package-lock est généré automatiquement à partir de toute opération qui modifie l’arborescence package.json ou node_modules, en supposant que vous avez node> 5.x.x.

Exécutez également npm ci pour une installation propre à partir de package-lock

Attention aux différences de dev et de prod

Ne tenez pas pour acquis que tout fonctionnera comme le développement avec la génération de prod.

Par exemple, en mode de développement, la détection des modifications s’exécute deux fois. La deuxième fois qu’il s’exécute (une fois la première terminée), si les valeurs liées sont différentes, cela produit la fameuse erreur: ExpressionChangedAfterItHasBeenCheckedError.

Optimiseur de construction et bloc de fournisseur

Réglage vendorChunk à true dans la génération de prod, les bibliothèques seront placées dans un segment de fournisseur distinct.

Rappelez-vous, si buildOptimizer est vrai, définissez vendorChunk à faux. L’utilisation d’un optimiseur de build inclut le code de bibliothèque dans le bundle, ce qui entraîne une taille plus petite.

Utilisez un segment de fournisseur lorsque:

N’utilisez pas de segment de fournisseur lorsque:

Service dans les fournisseurs de sous-modules

Les services sont singleton dans le module fourni. Les ajouter à d’autres fournisseurs de modules créera une nouvelle instance.

Envisagez d’utiliser dans Injectable providedIn root | any | platform

Avant Angular 6 et versions ultérieures, nous pouvons utiliser providedIn:'root' dans Injectable au lieu d’importer le service dans un module.

De plus, Angular 9 nous a présenté des providedIn options, any, et platform

En déclarant un providedIn dans le service injectable, nous ne devons importer dans aucun module. Au lieu de cela, si nous ajoutons le service chez les fournisseurs, nous devons également l’importer, qui sera inclus dans le pack final même si nous ne l’utilisons nulle part.

En utilisant providedIn, qui est le voie officielle et préférée, il permet Tremblement d’arbre. Avec Tree Shaking, si le service n’est utilisé nulle part, il ne sera pas fourni avec le reste du code, ce qui entraîne une taille de paquet plus petite et des temps de chargement plus rapides.

Qu’en est-il de providedIn root | any | platform options?

Au moment de la rédaction de cet article, la documentation angulaire officielle de providedIn ne couvre que root. Je vais donc essayer d’expliquer any et platform aussi simple que possible.

  • racine: Une instance du service pour l’ensemble de l’application
  • tout: Une instance pour le modules chargés avec impatience, instance différente pour chaque module paresseux
  • Plate-forme: Une instance pour toutes les applications angulaires exécutées sur la même page (utile pour les modules de services partagés)

Chargement paresseux

Veuillez charger paresseusement vos modules et ne pas les charger tous en même temps. Cela fait une énorme différence dans le temps de chargement, même pour les petites applications. Envisagez un chargement rapide des modules de base et des modules de fonctionnalités requis pour démarrer l’application et effectuer une interception initiale.

J’ai vu de grosses applications avec tous les modules être chargées avec impatience, et dans certains cas, cela dépasse 30 secondes pour démarrer.

Vous pouvez vérifier angulaire doc de chargement paresseux

Chargement paresseux loadChildren d’un endroit sûr

Si les ressources et le temps sont disponibles, vous pouvez envisager de stocker loadChildren chemin d’accès dans un endroit sûr et les récupérer après autorisation.

Choisissez Angular i18n (même s’il n’est pas encore mature) au lieu de ngx-translate

Oui, je sais, vous pensez probablement que la mise en œuvre angulaire d’i18n est nul!. Vous devez créer des versions différentes pour chaque langue et recharger pour chaque changement de langue.

Et tu as raison! C’était un enfer vivant pour moi et mon équipe lorsque je travaillais avec ces derniers.

Mais…. Gardez à l’esprit, Angular i18n passe par beaucoup d’efforts de développement et il est très complexe. Angular le pousse et deviendra finalement beaucoup mieux. Aussi, le développeur principal de ngx-translate est embauché par Angular et travaille dans i18n (source ici). Sa déclaration est que ngx-translate est juste un remplacement pour Angular jusqu’à ce que Angular i18n soit terminé, et à un moment donné, ngx-translate sera obsolète.

Utilisation trackBy quand tu peux

Vous avez rendu une collection avec *ngFor, et maintenant vous devez obtenir de nouvelles données à partir d’une demande HTTP et les réaffecter à la même collection. Cela entraînera la suppression par Angular de tous les éléments DOM associés aux données et le rendu à nouveau de tous les éléments DOM. Avoir une grande collection peut entraîner un problème de performances car les manipulations DOM sont coûteuses.

trackBy vient à la rescousse. En utilisant trackBy, le rendu ne se produira que pour les éléments de collection qui ont été modifiés (également nouveaux / supprimés).

Considérer ce qui suit

En appuyant sur le bouton, l’ensemble ul Le bloc HTML sera rendu de nouveau.

Ajoutons trackBy en incluant trackByFn et mettre à jour le *ngFor

Maintenant, en appuyant sur le bouton, les éléments avec une différence seront restitués. Dans notre cas, l’article mis à jour avec id: 2 et le nouvel article avec id: 4.

Angulaire webworker a été marqué comme obsolète et peut être retiré à angulaire 10

Changer la stratégie de détection: OnPush

Par défaut, Angular exécute la détection des modifications sur tous les composants pour chaque événement qui s’est produit. C’est la valeur par défaut ChangeDetectionStrategy.Default. La présence de nombreux composants et d’un grand nombre d’éléments peut entraîner des problèmes de performances. Pour y faire face, nous pouvons définir ChangeDetectionStrategy.OnPush sur les composants que nous voulons. Par exemple.

Par paramètres ChangeDetectionStrategy.OnPush le ChildComponent cela dépend uniquement des valeurs d’entrée et il exécutera uniquement des vérifications si les valeurs d’entrée changent.

Si l’entrée est un type de valeur, elle exécutera une vérification pour la nouvelle valeur.

Pour une valeur de type référence, une vérification ne s’exécutera que s’il existe une différence entre l’ancienne et la nouvelle référence d’entrée.

Prenez note d’un cas où nous avons une référence d’entrée différente et la détection de changement n’est pas en cours d’exécution.

Ayant un code similaire avec ci-dessus, vous remarquez que même si la référence d’entrée change, le composant n’est pas mis à jour. C’est parce qu’il n’y a pas de déclencheur d’événement pour exécuter la détection de changement en premier lieu.

La solution consiste à utiliser inject ChangeDetectorRef et déclencher par programme la détection des modifications.

Soyez prudent avec les événements de spam

Comme indiqué ci-dessus, chaque événement déclenche une détection de changement. Soyez prudent avec les événements globaux et de fenêtre qui peuvent provoquer des vérifications involontaires sur toute l’application tout le temps

Le fameux ExpressionChangedAfterItHasBeenCheckedError Erreur

Si vous voyez cette erreur, cela signifie qu’il y a un problème avec votre code.

En mode développement, Angular exécute deux cercles de résumés. La première fois qu’il évalue les valeurs et met à jour le DOM. Si Angular fonctionne en mode développement, le cercle s’exécute une deuxième fois. Dans le deuxième cercle, Angular effectue une vérification et compare les valeurs avec le premier cercle. Si une différence est trouvée, elle produit l’erreur.

C’est pourquoi cette erreur signifie que vous avez un problème très grave avec votre code. Si l’erreur n’était pas levée, deux choses pouvaient se produire. Premièrement, pour que les valeurs soient les mêmes entre oldValues et newValues, cela pourrait conduire à une boucle circulaire infinie. Et deuxièmement, cela pourrait conduire à un état de modèle incohérent.

Un scénario simple qui peut provoquer l’erreur

Astuce: évitez de manipuler un tableau lié directement en boucle.

ViewChild/ContentChild disponibilité

Tous les deux ViewChild et ContentChild sont disponibles à partir de ngAfterViewInit et après. ngAfterViewInit est lorsque la vue du composant a été initialisée.

ViewChildren et ContentChildren retournera un QueryList, tandis que ViewChild et ContentChild renverra le premier élément auquel ils correspondaient.

Pur et impur Pipes

Le tuyau Pupe est lorsque angulaire exécute le tuyau uniquement lorsque la référence d’entrée change. Par défaut, les tuyaux sont purs. Considérez le tuyau pur suivant.

Maintenant, si nous ajoutons une nouvelle voiture quelque part dans notre code de composant…

Rien ne se passe. La vue n’est pas mise à jour. Cela est dû au fait que la référence du tableau de voiture est la même. Si nous voulons voir les changements, nous devons rendre notre tuyau impur ou re-référencer (non recommandé) le réseau de voitures.

URL de base et Chemins dans tsconfig.json

Au lieu de faire monter les importations comme ça…

Définissez les chemins de base dans lesquels vous souhaitez tsconfig.json

Vous fera gagner beaucoup de temps en refactoring

Pourquoi ne pas consulter Redux

Selon la situation et si une gestion d’état de type annuler / rétablir est nécessaire, vous pouvez envisager d’utiliser redux pour votre prochaine application angulaire. Vous pouvez vérifier rxjs pour Angular.

Close Menu