¿Cuál es la diferencia entre el modo de producción y desarrollo en Angular2?

Respuestas:

76

En el modo de desarrollo, la detección de cambios realiza una segunda ejecución inmediatamente después de la primera ejecución y produce un error si algún valor límite ha cambiado entre la primera y la segunda ejecución. Esto ayuda a localizar errores en los que la comprobación de valores tiene efectos secundarios o los campos o funciones no devuelven el mismo valor en llamadas posteriores, lo que socava la detección de cambios de Angular.

En el modo de desarrollo, durante la segunda ejecución de detección de cambios, Angular también hace algunas comparaciones profundas de objetos que no hará en producción para detectar cambios de modelo que no están permitidos.

Actualizar:

En el modo de desarrollo, también se imprime una sugerencia en la consola cuando el servicio de desinfección de HTML elimina los valores de los enlaces [innerHTML]="..."o [ngStyle]="...". Ver también: En RC.1 algunos estilos no se pueden agregar usando sintaxis de enlace

Günter Zöchbauer
fuente
5
¿Cómo detecto si estoy ejecutando en modo de producción o en modo de desarrollo?
Ya he visto que se pregunta esto, pero no he visto una respuesta. Debe habilitar el modo de producción explícitamente y también puede establecer alguna variable global cuando habilite prodMode que se puede verificar en su código para saber qué modo está activo.
Günter Zöchbauer
6
Además, si está ejecutando en modo de desarrollo y abre la consola en su navegador, aparecerá un mensaje impreso que dice "Angular 2 se está ejecutando en modo de desarrollo. Llame a enableProdeMode () para habilitar el modo de producción". Si ya está en modo de producción, no verá nada aquí.
c.dunlap
36

Los documentos para ApplicationRef.tick () dicen:

En el modo de desarrollo, tick()también realiza un segundo ciclo de detección de cambios (TTL = 2) para garantizar que no se detecten más cambios. Si se detectan cambios adicionales durante este segundo ciclo, las vinculaciones en la aplicación tienen efectos secundarios que no se pueden resolver en una sola pasada de detección de cambios. En este caso, Angular arroja un error, ya que una aplicación Angular solo puede tener una pasada de detección de cambios durante la cual deben completarse todas las detecciones de cambios.

La razón por la que no podemos tener cambios adicionales es porque en el modo de producción, la detección de cambios solo se ejecuta una vez, lo que significa que cada componente en el árbol de componentes se examina una vez (TTL = 1) ... desde la parte superior, en profundidad primero orden. Entonces, si, por ejemplo, un cambio en la propiedad de entrada de un componente secundario provoca un cambio en alguna otra propiedad que el componente principal ha vinculado en una vista / plantilla, la vista del componente principal no se actualizará (porque la detección de cambios no volverá a visitar el componente padre en modo de producción ... debido al recorrido del árbol de "una pasada"). Solo se actualizará la próxima vez que ocurra algún evento y la detección de cambios se ejecute nuevamente, ¡pero es demasiado tarde!

Aquí hay un Plunker que viola la regla: un componente secundario tiene un setmétodo en una propiedad de entrada que modifica otra propiedad de entrada. Sí, es un ejemplo artificial, pero es más fácil de entender que el siguiente:

Otro escenario en el que puede encontrarse con este problema es con tuberías con estado. Mira esta respuesta si ese es tu problema.

Debe describir su problema (en otra pregunta SO). Debería haber una forma de solucionarlo.

Mark Rajcok
fuente