Jaka jest różnica między trybem produkcyjnym a trybem deweloperskim w Angular2?

Odpowiedzi:

77

W trybie programistycznym wykrywanie zmian wykonuje drugi przebieg natychmiast po pierwszym przebiegu i generuje błąd, jeśli jakakolwiek wartość powiązana uległa zmianie między pierwszym a drugim przebiegiem. Pomaga to zlokalizować błędy, w których sprawdzanie wartości ma skutki uboczne lub pola lub funkcje nie zwracają tej samej wartości przy kolejnych wywołaniach, co osłabia wykrywanie zmian przez Angular.

W trybie programistycznym, podczas drugiego przebiegu wykrywania zmian, Angular wykonuje również pewne głębokie porównania obiektów, których nie wykona w środowisku produkcyjnym, aby wykryć niedozwolone zmiany modelu.

Aktualizacja:

W trybie programistycznym podpowiedź jest również drukowana na konsoli, gdy usługa oczyszczania HTML usuwa wartości z powiązań [innerHTML]="..."lub [ngStyle]="...". Zobacz też: W RC.1 niektórych stylów nie można dodawać za pomocą składni wiązania

Günter Zöchbauer
źródło
5
Jak mogę sprawdzić, czy pracuję w trybie produkcyjnym, czy w trybie programowania?
Widziałem już takie pytanie, ale nie widziałem odpowiedzi. Musisz jawnie włączyć tryb produkcyjny i możesz również ustawić jakąś zmienną globalną po włączeniu prodMode, który można sprawdzić w kodzie, aby wiedzieć, który tryb jest aktywny.
Günter Zöchbauer
6
Ponadto, jeśli pracujesz w trybie deweloperskim i otworzysz konsolę w przeglądarce, zostanie wydrukowany komunikat „Angular 2 działa w trybie programistycznym. Wywołaj metodę enableProdeMode (), aby włączyć tryb produkcyjny”. Jeśli jesteś już w trybie produkcyjnym, nic tu nie zobaczysz.
c.dunlap
36

Stan dokumentacji dla ApplicationRef.tick () :

W trybie programowania tick()wykonuje również drugi cykl wykrywania zmian (TTL = 2), aby zapewnić, że żadne dalsze zmiany nie zostaną wykryte. Jeśli w tym drugim cyklu zostaną wykryte dodatkowe zmiany, powiązania w aplikacji mają skutki uboczne, których nie można rozwiązać w pojedynczym przebiegu wykrywania zmian. W tym przypadku Angular zgłasza błąd, ponieważ aplikacja Angular może mieć tylko jeden przebieg wykrywania zmiany, podczas którego musi zostać zakończone wszystkie wykrywanie zmian.

Powodem, dla którego nie możemy wprowadzić dodatkowych zmian, jest to, że w trybie produkcyjnym wykrywanie zmian działa tylko raz, co oznacza, że ​​każdy komponent w drzewie komponentów jest badany raz (TTL = 1) ... od góry, najpierw w głąb zamówienie. Jeśli więc np. Zmiana właściwości wejściowych komponentu potomnego powoduje zmianę innej właściwości, którą komponent nadrzędny związał w widoku / szablonie, widok komponentu nadrzędnego nie zostanie zaktualizowany (ponieważ wykrywanie zmian nie spowoduje ponownego odwiedzenia komponent macierzysty w trybie produkcyjnym ... ze względu na przechodzenie drzewa w jednym przejściu). Zostanie zaktualizowany dopiero następnym razem, gdy nastąpi jakieś zdarzenie, a wykrywanie zmian zostanie uruchomione ponownie - ale to już za późno!

Oto Plunker, który narusza regułę - składnik potomny ma setmetodę we właściwości wejściowej, która modyfikuje inną właściwość wejściową. Tak, to wymyślony przykład, ale łatwiej go zrozumieć niż następny:

Innym scenariuszem, w którym możesz napotkać ten problem, są potoki stanowe. Sprawdzić tę odpowiedź, jeśli to twój problem.

Powinieneś opisać swój problem (w innym pytaniu SO). Powinien istnieć sposób, aby to naprawić.

Mark Rajcok
źródło