Quelle est la différence entre le mode de production et le mode de développement dans Angular2?

Réponses:

76

En mode développement, la détection des modifications effectue une deuxième exécution immédiatement après la première exécution et produit une erreur si une valeur liée a changé entre la première et la deuxième exécution. Cela aide à localiser les bogues où la vérification des valeurs a des effets secondaires ou les champs ou les fonctions ne renvoient pas la même valeur lors des appels suivants, ce qui nuit à la détection des changements d'Angular.

En mode développement, lors de la deuxième exécution de détection des modifications, Angular effectue également des comparaisons d'objets approfondies qu'il ne fera pas en production pour détecter les modifications de modèle qui ne sont pas autorisées.

Mettre à jour:

En mode de développement, un indice est également imprimé sur la console lorsque le service de désinfection HTML supprime les valeurs des liaisons [innerHTML]="..."ou [ngStyle]="...". Voir aussi: Dans RC.1, certains styles ne peuvent pas être ajoutés à l'aide de la syntaxe de liaison

Günter Zöchbauer
la source
5
Comment puis-je détecter si j'exécute en mode production ou en mode développement?
J'ai déjà vu cela se poser mais je n'ai pas vu de réponse. Vous devez activer explicitement le mode de production et vous pouvez également définir une variable globale lorsque vous activez prodMode qui peut être vérifiée dans votre code pour savoir quel mode est actif.
Günter Zöchbauer
6
De plus, si vous exécutez en mode développement et ouvrez la console dans votre navigateur, un message apparaîtra indiquant "Angular 2 est en cours d'exécution en mode développement. Appelez enableProdeMode () pour activer le mode production." Si vous êtes déjà en mode production, vous ne verrez rien ici.
c.dunlap
36

L'état de la documentation pour ApplicationRef.tick () :

En mode développement, tick()effectue également un deuxième cycle de détection de changement (TTL = 2) pour s'assurer qu'aucun autre changement n'est détecté. Si des modifications supplémentaires sont prises en compte au cours de ce deuxième cycle, les liaisons dans l'application ont des effets secondaires qui ne peuvent pas être résolus en une seule passe de détection des modifications. Dans ce cas, Angular renvoie une erreur, car une application Angular ne peut avoir qu'une seule passe de détection de changement pendant laquelle toute la détection de changement doit se terminer.

La raison pour laquelle nous ne pouvons pas avoir de modifications supplémentaires est qu'en mode production, la détection des modifications ne s'exécute qu'une seule fois, ce qui signifie que chaque composant de l'arborescence des composants est examiné une fois (TTL = 1) ... du haut, en profondeur d'abord ordre. Ainsi, si, par exemple, une modification de la propriété d'entrée d'un composant enfant entraîne une modification d'une autre propriété que le composant parent a liée dans une vue / un modèle, la vue du composant parent ne sera pas mise à jour (car la détection de modification ne revisitera pas le composant parent en mode production ... en raison de la traversée d'arborescence "one-pass"). Il ne sera mis à jour que la prochaine fois qu'un événement se produira et la détection des modifications s'exécutera à nouveau - mais c'est trop tard!

Voici un Plunker qui viole la règle - un composant enfant a une setméthode sur une propriété d'entrée qui modifie une autre propriété d'entrée. Oui, c'est un exemple artificiel, mais il est plus facile à comprendre que le suivant:

Un autre scénario dans lequel vous pourriez rencontrer ce problème concerne les canaux avec état. Découvrez cette réponse si c'est votre problème.

Vous devez décrire votre problème (dans une autre question SO). Il devrait y avoir un moyen de résoudre ce problème.

Mark Rajcok
la source