Angular v13 Artık Kullanılabilir!

Hepinizle paylaşmak üzere Angular v13'ün yepyeni sürümüyle geri döndük! Bu son sürüm, ekiplerinizin harika uygulamalar oluşturmasına yardımcı olacak her türlü güncellemeyi ve özelliği getiriyor.

ng updateProjenizde çalıştırarak Angular v13'ü şimdi edinin . Ekiplerin projelerini nasıl güncelleyecekleri konusunda talimatlar almasına yardımcı olmak için update.angular.io adresinde bir güncelleme kılavuzumuz da var .

Her yeni sürümde amacımız, Angular'ı daha iyi hale getirmenin maddi yollarını bulmaktır. Bu sürümde bunu, Ivy tabanlı özelliklerin ve optimizasyonların genişletilmesi, mükemmel Angular topluluğumuzla ortaklık kurarak ve ekipleriniz ve projeleriniz için sorunsuz, istikrarlı bir güncelleme süreci sağlamaya devam ederek gerçekleştirdik.

Ivy'nin gücüyle Angular'ı nasıl ileriye taşıdığımıza bir göz atarak başlayalım.

Açısal işlemeyi geleceğe taşıma

Gelen v12 sürüm Mayıs 2021 yılında biz “Her yerde Ivy” hakkında konuştuk ve bazı olacağını belirtti önemli değişiklikler bu girişimi desteklemekten açısal için. Bunun peşinde koşarken gayretli davrandık ve Ivy optimizasyonlar ve iyileştirmeler için kapılar açmaya devam ederken v13'te bazı etkili değişiklikler yapmaktan son derece memnunuz.

Görüş Durumu Motoru

View Engine , v13'ten itibaren Angular'da artık mevcut değildir. Bu harika bir haber çünkü Angular, platformla üretkenliğinizi artıran Ivy tabanlı özellikler oluşturmaya devam edebilir. View Engine'in kaldırılması ayrıca, Angular'ın gelecekte ngcc( Angular uyumluluk derleyicisi ) bağımlılığını azaltabileceği ve meta veriler ve özet dosyaları artık dahil edilmediğinden ekiplerin daha hızlı derlemeyi dört gözle bekleyebileceği anlamına gelir .

Açısal Paket Formatında (APF) Değişiklikler

Eğik Paketi Biçimi (APF) aerodinamik ve daha iyi geliştiriciler hizmet etmek modernize edilmiştir. APF'yi v13'te düzene sokmak için View Engine'e özgü meta veriler dahil olmak üzere eski çıktı biçimlerini kaldırdık.

Modernize etmek için ES2020 gibi daha modern JS formatlarını standartlaştırdık. APF'nin en son sürümüyle oluşturulan kitaplıklar artık ngcc. Bu değişikliklerin bir sonucu olarak kitaplık geliştiricileri, daha yalın paket çıktısı ve daha hızlı yürütme bekleyebilirler.

Ayrıca, Düğüm Paketi Dışa Aktarmalarını desteklemek için APF'yi güncelledik . Bu, geliştiricilerin yanlışlıkla değişebilecek dahili API'lere güvenmelerine yardımcı olacaktır.

Bileşen API güncellemeleri

Ivy ayrıca geliştiricilerin dinamik olarak bileşenler oluşturma yöntemlerinde yaşam kalitesi iyileştirmeleri sağlar. API artık basitleştirildi. Angular v13'teki değişikliklerden önce, bileşenleri dinamik olarak oluşturmak çok sayıda ortak kod gerektiriyordu.

Yeni API, yapıcıya ComponentFactoryResolverenjekte edilme ihtiyacını ortadan kaldırır . Ivy, ViewContainerRef.createComponentilişkili bir fabrika oluşturmadan bileşeni somutlaştırma fırsatı yaratır .

Angular'ın önceki sürümleriyle bileşen oluşturmaya bir örnek:

	@Directive({ … })
	export class MyDirective {
	constructor(private viewContainerRef: ViewContainerRef,
	private componentFactoryResolver:
	ComponentFactoryResolver) {}
	createMyComponent() {
	const componentFactory = this.componentFactoryResolver.
	resolveComponentFactory(MyComponent);
	this.viewContainerRef.createComponent(componentFactory);
	}
	}

view rawcomponent.ts hosted with ❤ by GitHub

Yeni API ile bu kod şöyle olabilir:

	@Directive({ … })
	export class MyDirective {
	constructor(private viewContainerRef: ViewContainerRef) {}
	createMyComponent() {
	this.viewContainerRef.createComponent(MyComponent);
	}
	}

view rawcomponent.ts hosted with ❤ by GitHub

Ivy'nin etkinleştireceği çalışmalarda bunun gibi daha birçok API geliştirmemiz var.

IE11 desteğinin sonu

Geri bildiriminizi duyduk ve Angular v13'te IE11 desteğinin kaldırılmasıyla ileriye doğru bir yol açmak için çalıştık.

IE11 desteğinin kaldırılması, Angular'ın yerel web API'leri aracılığıyla CSS değişkenleri ve web animasyonları gibi modern tarayıcı özelliklerinden yararlanmasına olanak tanır. Dahası, IE'ye özgü çoklu dolguları ve kod yollarını kaldırabildiğimiz için uygulamalar daha küçük olacak ve daha hızlı yüklenecek. Ayrıca diferansiyel yükleme ihtiyacını ortadan kaldırır . Uygulama kullanıcıları daha hızlı yükleme ve iyileştirilmiş bir kullanıcı deneyiminden faydalanırken, geliştiriciler geliştirilmiş API'lerden ve altyapıdan yararlanacak.

Çalıştırmak ng update, bu IE'ye özgü çoklu dolguları otomatik olarak düşürür ve proje geçişi sırasında paket boyutunu azaltır.

Yorum talebine (RFC) katılan herkese teşekkürler. Halen mevcut projeler için IE11 kullanıcılarını desteklemesi gereken geliştiriciler, Angular v12'yi kullanmaya devam edebilir ve Kasım 2022'ye kadar desteklenecektir .

Angular CLI'deki İyileştirmeler

Angular'ın araçlarıyla ilgili güncellemeler hakkında . Angular artık yeni v13 projeleri için varsayılan olarak kalıcı derleme önbelleğinin kullanımını destekliyor . Varsayılan olarak [RFC] Kalıcı derleme önbelleğinden gelen değerli geri bildirimler, derleme hızında %68'e varan iyileşme ve daha ergonomik seçeneklerle sonuçlanan bu araç güncellemesine yol açtı. Bu özellikleri etkinleştirmek için v13'e yükseltilen mevcut projeler için geliştiriciler bu yapılandırmayı şuraya ekleyebilir angular.json:

	{
	"$schema": "...",
	"cli": {
	"cache": {
	"enabled": true,
	"path": ".cache",
	"environment": "all"
	}
	}
	...
	}

view rawangular.json hosted with ❤ by GitHub

Belgelerde daha fazla ayrıntı öğrenin .

ESBuild ayrıca bu sürümde bazı performans iyileştirmeleri görüyor! Artık global komut dosyalarını optimize etmek için esbuildbirlikte çalışan 'ı tanıttık terser. Ayrıca, esbuildCSS kaynak haritalarını destekler ve tüm stil sayfalarını optimize etmenin yanı sıra genel CSS'yi optimize edebilir.

Çerçeve değişiklikleri ve bağımlılık güncellemeleri

Angular v13 ayrıca bazı yararlı güncellemeler ve önemli değişiklikler içerir. İlk olarak, RxJS 7.4 artık ng new. RxJS v6.x kullanan mevcut uygulamalar, npm install rxjs@7.4komutu kullanarak manuel olarak güncellemek zorunda kalacak . Sürüm 6'dan sürüm 7'ye yapılan değişiklikler hakkında daha fazla bilgi edinmek için rxjs.dev adresindeki bu özete bakın .

Bu yeterli değilse, artık TypeScript 4.4 için destek var. TypeScript yayın bloguna göz atarak daha fazla bilgi bulabilirsiniz .

Açısal testlerde iyileştirmeler

Artık TestBedher testten sonra test modüllerini ve ortamlarını daha iyi yıkmak için bazı önemli iyileştirmeler yaptık . DOM artık her testten sonra temizleniyor ve geliştiriciler daha hızlı, daha az bellek yoğun, daha az birbirine bağımlı ve daha optimize testler bekleyebilirler.

Bu özellik 12.1.0'dan beri tercih edilmektedir ve şimdi özelleştirilebilir kalırken varsayılan olacak. İşte nasıl - TestBed.initTestEnvironmentyöntem aracılığıyla tüm test paketi için yapılandırılabilir :

	beforeEach(() => {
	TestBed.resetTestEnvironment();
	TestBed.initTestEnvironment(
	BrowserDynamicTestingModule,
	platformBrowserDynamicTesting(),
	{
	teardown: { destroyAfterEach: true }
	}
	);
	});

view rawdemo.spec.ts hosted with ❤ by GitHub

Veya TestBed.configureTestingModuleyöntemi güncelleyerek modül başına yapılandırılabilir :

	beforeEach(() => {
	TestBed.resetTestEnvironment();
	...
	TestBed.configureTestingModule({
	declarations: [TestComp],
	teardown: { destroyAfterEach: true }
	});
	});

view rawdemo.spec.ts hosted with ❤ by GitHub

Bu, bu değişiklikleri her proje ve testleri için en anlamlı oldukları yerde uygulama esnekliği sağlar. Şuna bak blog tarafından Lars Gyrup Brink Nielsen daha fazla bilgi edinmek için.

Bileşenler hakkında her şey

Erişilebilirlik (a11y), Angular topluluğunun içinde ve dışında inşa ettiğimiz her şeyin temeli olmalıdır. Bu sorumluluğu ciddiye alıyoruz ve yaptığımız çalışma , Angular Material bileşenlerinde anlamlı iyileştirmeler ve değişikliklerle sonuçlandı .

Tüm MDC tabanlı bileşenler, kontrast, dokunma hedefleri, ARIA ve daha fazlası gibi alanlarda yüksek a11y standartlarını karşılayacak şekilde değerlendirilmiştir.

Bu değişikliklerin bileşenleri nasıl etkilediği hakkında daha iyi bir fikir edinmek için, onay kutusu ve radyo düğmesi gibi bileşenler için dokunma hedefi boyutlarında yaptığımız ayarlamalara göz atın .

Dokunma hedefi boyutlarının bir karşılaştırması. Sağdaki bedenler yeni bedenlerdir.

Ayrıca, birden çok bileşen için yüksek kontrast modlarında bazı iyileştirmeler yapılmıştır.

Yüksek kontrast modunda Malzeme Bileşenleri

Angular Component'in erişilebilirliğini iyileştirme hakkındaki blog yazımızda bu değişiklikler hakkında daha fazla bilgi edinin . Bunun herkesin daha kapsayıcı Angular uygulamaları oluşturmasına yardımcı olacağını umuyoruz.

Diğer önemli güncellemeler

2020'de Angular v11'in piyasaya sürülmesiyle birlikte, Google Yazı Tiplerini satır içine alma desteğini kullanıma sunduk. Şimdi, desteği Adobe Fonts'a genişletiyoruz . Unutmayın, satır içi yazı tipleri, First Contentful Paint'i (FCP) hızlandırarak uygulamanızın performansını artırabilir . Bu değişiklik artık varsayılan olarak herkes için etkindir! Tek yapman gereken ng update. Yazı tipi satır içi ekleme hakkında yardımcı olabilecek bir videomuz var, buradan kontrol edin:

Geliştiricilere yerelleştirme API'si hakkında daha fazla bilgi vermek için angular.io'daki belgelerde önemli değişiklikler yaptık. Yerelleştirme kılavuzları , öğrenme yolculuğunu daha net hale getirmek için daha küçük bölümler içerecek şekilde güncellendi. Ayrıca için daha fazla API belgesi ekledik $localize.

Topluluk katkıları

Angular topluluğu, çerçeveye özellikler ekleyerek büyük bir şekilde ortaya çıkmaktan asla vazgeçmez. Angular ekibi, böylesine canlı ve destekleyici bir topluluk için inanılmaz derecede minnettar. Bu sürümde yer alan katkılardan birkaçını vurgulamak için biraz zaman ayıralım.

Doğrulayıcıları dinamik olarak etkinleştirin/devre dışı bırakın

Nirmal Bhagwani tarafından gönderilen bu PR , değer olarak ayarlanarak yerleşik doğrulayıcıların devre dışı bırakılmasına izin verir null. Bu, dinamik formlar oluştururken giderek daha yararlı hale gelir.

İptal edilen navigasyondan sonra geçmişi geri yükle

Ahmed Ayed bir katkıda PR verir canceledNavigationResolutionayarlandığında yönlendirici bayrak tarayıcı geçmişi hesaplanan değeri geri computed.

	RouterModule.forRoot(
	routes,
	{ canceledNavigationResolution: 'computed' },
	);

view rawrouter.ts hosted with ❤ by GitHub

Bunlar, altını çizdiğimiz güncellemelerden birkaçı, ancak topluluktan daha da fazla katkı geldi:

• SwUpdate API'sini biraz daha ergonomik hale getirmek
• Null yapılabilir sembolde isteğe bağlı zincirlemeyi otomatik uygulamayı etkinleştirmek için Dil Hizmeti yapılandırması
• Bir çıkış takıldığında/çıkarıldığında yönlendirici etkinleştirme/devre dışı bırakma olayları yayar
• Ve dahası!