Hata ayıklama için Angular 11 serisi (XIV) üretim ortamı

Küçük · Yayınlandı 11.08.2020 17:59:35

Angular 9 Serisi (1) Dinamik Yüklü Bileşenler
https://www.itsvse.com/thread-9238-1-1.html

Açısal 9 serisi (2) dinamik bileşen iletim parametreleri
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 serisi (3) dinamik bileşen olaylarına abone olur
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 Serisi (IV) Özel Boru Hatları
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 Serisi (V), miktar para birimi formatını biçimlendirir
https://www.itsvse.com/thread-9249-1-1.html

Açısal 9 serisi (VI) yerel JS değişkenlerini ve yöntemlerini çağırır
https://www.itsvse.com/thread-9254-1-1.html

Açısal 9 serisi (VII) CSS tarzı dürbün
https://www.itsvse.com/thread-9264-1-1.html

Angular 9 serisi (VIII), bir olayı set aracılığıyla tetikleyerek bir alt bileşenin değerini günceller
https://www.itsvse.com/thread-9267-1-1.html

Sayfada uygulanan Angular 9 Serisi (dokuz) #id seçici
https://www.itsvse.com/thread-9278-1-1.html

Angular 9 serisi (10) vconsole ve eruda geliştirici hata ayıklama panellerini gömüyor
https://www.itsvse.com/thread-9286-1-1.html

Angular 9 Serisi (XI) Stilleri Tanımlamanın 5 Yolu
https://www.itsvse.com/thread-9305-1-1.html

Angular 9 serisi (XII), OTP'lere dayalı dinamik jetonlar üretir
https://www.itsvse.com/thread-9325-1-1.html

Angular 10 serisi (on üç) Baidu echarts grafiklerini tanıtıyor
https://www.itsvse.com/thread-9347-1-1.html

Angular projesini build komutuyla bir üretim ortamına paketliyoruz ve beklenen etki geliştirme ortamımızda gördüklerimizden farklı olabilir.

TS Kodu:

Giriş görünür.

AppComponent mevcut bileşendir.

Geliştirme ortamı ve üretim ortamının renderleri aşağıdaki gibidir:

Üretim ortamı beklediğimiz gibi değildi.

Build komutu verisi hakkında:

Açısal yapı performansı optimizasyonu
https://www.itsvse.com/thread-9203-1-1.html

Şu anda hataları düzeltmemiz gerekiyor.
SourceMap, kaynak kodunun ve derlenmiş kodun konum eşlemesini saklayan bir bilgi dosyasıdır

Ön yüz çalışmalarında, esas olarak aşağıdaki üç yönde hata ayıklama problemlerini çözmek için kullanılır:

a. Kod sıkıştırma karıştırıldıktan sonra
b. sass ve typeScript gibi diğer dillerle css veya JS'ye derledikten sonra
c. Webpack gibi paketleme araçlarıyla çoklu dosya birleştirme sonrası

Yukarıdaki üç durumda, kaynak kodunu hata ayıklama sırasında yaptığımız kadar kolay ayıklayamıyoruz, bu yüzden SourceMap'in konsolda kaynak koduna dönüştürmemize yardımcı olması gerekiyor.

Build komutunu değiştirmemiz gerekiyor, bu şu şekildedir:

Giriş görünür.

(Parametre eklemeden önce)

(Parametre eklendikten sonra)

Birçok *.map dosyasının üretildiğini görebilirsiniz.

Yukarıdaki resimde gösterildiği gibi, Google Chrome kullanın, geliştirici moduna girmek için F12 tuşuna basın, kaynağı seçin, main.js'i seçin ve ardından sağ tıklayın ve oluşturulan harita dosyası adresini eklemek için "Kaynak haritası ekle" seçeneğini seçin.

Mesela:

http://127.0.0.1:8089/main.568ae4bdd06023f965c7.js.map

(Son)

[Angular] Hata ayıklama için Angular 11 serisi (XIV) üretim ortamı

İlgili Yazılar

Görüntülenen bölümler