Angular 9 sekarang tersedia - Ivy telah tiba

Cara meningkatkan ke versi 9

Ivy

• Ukuran bundel yang lebih kecil
• Pengujian lebih cepat
• Debugging terbaik
• Peningkatan ikatan kelas dan gaya CSS
• Pemeriksaan tipe yang ditingkatkan
• Pesan galat build yang ditingkatkan
• Peningkatan waktu pembuatan, AOT diaktifkan secara default
• Meningkatkan internasionalisasi

Ukuran bundel yang lebih kecil

• Aplikasi kecil yang tidak menggunakan banyak fitur kerangka kerja bisa mendapat manfaat paling besar dari treeshaking.
• Aplikasi besar dengan banyak komponen dapat memanfaatkan pengurangan ukuran pabrik.
• Aplikasi berukuran sedang akan mendapatkan kira-kira sama, atau sedikit lebih kecil, karena mereka mendapat manfaat lebih sedikit dari pembuatan pohon dan tidak menggunakan banyak komponen untuk mendapatkan manfaat besar dari pabrik yang lebih kecil.

Pengujian lebih cepat

Peningkatan debugging

• Angular , .
• , applyChanges

Peningkatan gaya dan kelas CSS.

<my-component style="color:red;" [style.color]="myColor" [style]="{color: myOtherColor}" myDirective></div>

@Component({
  host: {
    style: "color:blue"
  },...
})
...

@Directive({
  host: {
    style: "color:black",
    "[style.color]": "property"
  },...
})
...

<div [style. -- main-border-color]=" '#CCC' ">
<p style="border: 1px solid var( - -main-border-color)">hi</p>
</div>

Pengecekan tipe ditingkatkan

• fullTemplateTypeCheck - menyalakan bendera ini memberitahu kompiler untuk memeriksa semua yang ada di template Anda (ngIf, ngFor, tp-template, dll.)
• strictTemplates - mengaktifkan bendera ini akan menerapkan aturan paling ketat untuk pemeriksaan jenis.

Kesalahan build diperbaiki

Waktu build ditingkatkan, compiler AOT diaktifkan secara default.

Peningkatan Internasionalisasi (i18n)

Pembaruan yang lebih andal

• Selalu gunakan versi terbaru dari CLI. Dimulai dengan 8.3.19 CLI, kami sekarang menggunakan CLI dari versi target pembaruan. Di masa depan, pembaruan akan selalu diproses oleh CLI terakhir.
• Perbarui kemajuan dengan lebih baik. ng pembaruan sekarang memberikan informasi lebih lanjut tentang apa yang terjadi di bawah tenda. Untuk setiap migrasi, Anda akan melihat informasi tentang itu.
• Melakukan debug pembaruan yang lebih mudah. Secara default, ng pembaruan memulai semua migrasi dan meninggalkan perubahan kumulatif ke disk untuk verifikasi. Pemutakhiran Versi 9 juga memperkenalkan bendera baru --create-commit. Saat Anda menjalankan pembaruan --create-commit, alat ini menangkap status basis kode Anda setelah setiap migrasi, sehingga Anda dapat selangkah demi selangkah membuat dan men-debug perubahan yang diposting ke kode Anda.

Fitur-Fitur Baru “providedIn”

• platform - providedIn: indikasi 'platform' membuat layanan tersedia dalam injector platform singleton khusus, yang digunakan bersama oleh semua aplikasi pada halaman.
• any - memberikan contoh unik untuk setiap modul (termasuk modul malas)

Mengikat komponen

it("should switch to bug report template", async () => {
  expect(fixture.debugElement.query("bug-report-form")).toBeNull();
  const selectTrigger = fixture.debugElement.query(
    By.css(".mat-select-trigger")
  );
  selectTrigger.triggerEventHandler("click", {});
  fixture.detectChanges();
  await fixture.whenStable();
  const options = document.querySelectorAll(".mat-select-panel mat-option");
  options[1].click(); // Click the second option, "Bug".
  fixture.detectChanges();
  await fixture.whenStable();
  expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});

it("should switch to bug report template", async () => {
  expect(fixture.debugElement.query("bug-report-form")).toBeNull();
  const select = await loader.getHarness(MatSelect);
  await select.clickOptions({ text: "Bug" });
  expect(fixture.debugElement.query("bug-report-form")).not.toBeNull();
});

Komponen baru

• Anda dapat menyematkan pemutar YouTube di aplikasi Anda dengan pemutar youtube baru.
• Kami juga memperkenalkan komponen google-maps. Komponen-komponen ini memudahkan untuk memvisualisasikan Google Maps, penanda tampilan, dan menghubungkan interaktivitas sehingga berfungsi seperti komponen sudut biasa, sehingga tidak perlu mempelajari Google Maps API.

Peningkatan layanan IDE & bahasa

• Tata bahasa TextMate untuk sintaksis templat sekarang memungkinkan Anda untuk menyorot sintaksis di templat tersemat dan eksternal
• Pergi ke Definisi untuk templateUrl dan styleUrls
• Ketik dan informasi NgModule di tooltip

Dukungan TypeScript 3.7