Apa perbedaan antara mode produksi dan pengembangan di Angular2?

Jawaban:

77

Dalam mode pengembangan, deteksi perubahan melakukan proses kedua segera setelah proses pertama dan menghasilkan kesalahan jika ada nilai terikat yang berubah antara proses pertama dan kedua. Ini membantu untuk menemukan bug di mana memeriksa nilai memiliki efek samping atau bidang atau fungsi tidak mengembalikan nilai yang sama pada panggilan berikutnya yang merusak deteksi perubahan Angular.

Dalam mode pengembangan, selama proses deteksi perubahan kedua, Angular juga melakukan beberapa perbandingan objek mendalam yang tidak akan dilakukan dalam produksi untuk mendeteksi perubahan model yang tidak diizinkan.

Memperbarui:

Dalam mode pengembangan, petunjuk juga dicetak ke konsol saat layanan pembersih HTML menghapus nilai dari binding [innerHTML]="..."atau [ngStyle]="...". Lihat juga: Di RC.1 beberapa gaya tidak dapat ditambahkan menggunakan sintaks binding

Günter Zöchbauer
sumber
5
Bagaimana cara mendeteksi jika saya menjalankan mode produksi atau mode pengembangan?
Saya telah melihat ini ditanyakan tetapi saya belum melihat jawabannya. Anda perlu mengaktifkan mode produksi secara eksplisit dan Anda juga dapat menyetel beberapa variabel global saat Anda mengaktifkan prodMode yang dapat diperiksa di kode Anda untuk mengetahui mode apa yang aktif.
Günter Zöchbauer
6
Selain itu, jika Anda menjalankan mode pengembang dan membuka konsol di browser, akan ada pesan tercetak yang berbunyi "Angular 2 sedang berjalan dalam mode pengembangan. Panggil enableProdeMode () untuk mengaktifkan mode produksi". Jika Anda sudah dalam mode produksi, Anda tidak akan melihat apa pun di sini.
c.dunlap
36

Dokumen untuk status ApplicationRef.tick () :

Dalam mode pengembangan, tick()lakukan juga siklus deteksi perubahan kedua (TTL = 2) untuk memastikan bahwa tidak ada perubahan lebih lanjut yang terdeteksi. Jika perubahan tambahan terjadi selama siklus kedua ini, binding di aplikasi memiliki efek samping yang tidak dapat diselesaikan dalam satu kali proses deteksi perubahan. Dalam hal ini, Angular melontarkan kesalahan, karena aplikasi Angular hanya dapat memiliki satu deteksi perubahan yang selama itu semua deteksi perubahan harus diselesaikan.

Alasan kami tidak dapat memiliki perubahan tambahan adalah karena dalam mode produksi, deteksi perubahan hanya berjalan satu kali, yang berarti bahwa setiap komponen di pohon komponen diperiksa sekali (TTL = 1) ... dari atas, secara mendalam-pertama memesan. Jadi jika, misalnya, perubahan ke properti input komponen anak menyebabkan perubahan ke beberapa properti lain yang terikat oleh komponen induk dalam tampilan / template, tampilan komponen induk tidak akan diperbarui (karena deteksi perubahan tidak akan mengunjungi kembali komponen induk dalam mode produksi ... karena traversal pohon "satu jalan"). Ini hanya akan diperbarui saat beberapa peristiwa terjadi dan deteksi perubahan berjalan lagi - tapi itu sudah terlambat!

Berikut Plunker yang melanggar aturan - komponen anak memiliki setmetode pada properti input yang mengubah properti input lain. Ya, ini adalah contoh yang dibuat-buat, tetapi lebih mudah dipahami daripada yang berikut:

Skenario lain di mana Anda mungkin mengalami masalah ini adalah dengan pipa stateful. Lihat jawaban ini jika itu masalah Anda.

Anda harus menjelaskan masalah Anda (dalam pertanyaan SO lainnya). Harus ada cara untuk memperbaikinya.

Mark Rajcok
sumber