Qual é a diferença entre o modo de produção e desenvolvimento no Angular2?

Respostas:

76

No modo de desenvolvimento, a detecção de alterações faz uma segunda execução imediatamente após a primeira execução e produz um erro se qualquer valor de limite mudou entre a primeira e a segunda execução. Isso ajuda a localizar bugs onde a verificação de valores tem efeitos colaterais ou campos ou funções não retornam o mesmo valor em chamadas subsequentes, o que prejudica a detecção de alterações do Angular.

No modo de desenvolvimento, durante a segunda execução de detecção de alteração, o Angular também faz algumas comparações profundas de objetos que não fará na produção para detectar alterações de modelo não permitidas.

Atualizar:

No modo de desenvolvimento, uma dica também é impressa no console quando o serviço de limpeza de HTML remove os valores das ligações [innerHTML]="..."ou [ngStyle]="...". Veja também: Em RC.1 alguns estilos não podem ser adicionados usando a sintaxe de ligação

Günter Zöchbauer
fonte
5
Como posso detectar se estou executando no modo de produção ou no modo de desenvolvimento?
Já vi isso sendo perguntado, mas não vi uma resposta. Você precisa habilitar o modo de produção explicitamente e também pode definir algumas variáveis ​​globais ao habilitar o prodMode que pode ser verificado em seu código para saber qual modo está ativo.
Günter Zöchbauer
6
Além disso, se você estiver executando em modo de desenvolvimento e abrir o console em seu navegador, ele terá uma mensagem impressa que diz "Angular 2 está executando em modo de desenvolvimento. Chame enableProdeMode () para ativar o modo de produção." Se você já está no modo de produção, não verá nada aqui.
c.dunlap
36

Os documentos para o estado ApplicationRef.tick () :

No modo de desenvolvimento, tick()também executa um segundo ciclo de detecção de alteração (TTL = 2) para garantir que nenhuma alteração adicional seja detectada. Se mudanças adicionais forem detectadas durante este segundo ciclo, as ligações no aplicativo têm efeitos colaterais que não podem ser resolvidos em uma única passagem de detecção de mudança. Nesse caso, o Angular gera um erro, pois um aplicativo Angular só pode ter uma passagem de detecção de alteração durante a qual todas as detecções de alteração devem ser concluídas.

A razão pela qual não podemos ter mudanças adicionais é porque no modo de produção, a detecção de mudanças é executada apenas uma vez, o que significa que cada componente na árvore de componentes é examinado uma vez (TTL = 1) ... do topo, em profundidade primeiro ordem. Portanto, se, por exemplo, uma mudança na propriedade de entrada de um componente filho causar uma mudança em alguma outra propriedade que o componente pai tenha vinculado a uma visão / modelo, a visão do componente pai não será atualizada (porque a detecção de mudança não revisitará o componente pai no modo de produção ... por causa da travessia da árvore "uma passagem"). Ele só será atualizado na próxima vez que ocorrer algum evento e a detecção de alterações for executada novamente - mas já é tarde!

Aqui está um Plunker que viola a regra - um componente filho tem um setmétodo em uma propriedade de entrada que modifica outra propriedade de entrada. Sim, é um exemplo inventado, mas é mais fácil de entender do que o próximo:

Outro cenário em que você pode encontrar esse problema é com canais com estado. Verifique esta resposta se esse for o seu problema.

Você deve descrever seu problema (em outra pergunta do SO). Deve haver uma maneira de consertar isso.

Mark Rajcok
fonte