Merhabalar, dün itibariyle Angular 12 versiyonu yayınlandı 🎉 Bu yazıda da bazı önemli değişiklikleri kısaca aktarmaya çalışacağım.

 

Tamamen Ivy'e geçiş

Eski View Engine derleyici kullanımdan kaldırıldı. Artık tamamen Ivy'e geçiliyor ve bu değişiklik için biz kullanıcılar herhangi bir işlem yapmayacağız.

Hala View Engine kullanan kütüphaneler de hiçbir işlem yapmadan uyumluluk derleyicisi (ngcc) ile çalışmaya devam edebilecekler.

 

Ivy nedir? diyorsanız eğer;

Ivy, projelerinizi daha hızlı ve daha küçük boyutlara ulaştırmayı hedefleyen Angular 9 ile birlikte varsayılan olarak gelen derleyicidir.

 

 

 

Nullish Operatörü

Artık bir ifadenin null ve undefined olmaması durumunu kontrol etmek için ?? operatörünü kullanabileceğiz. Bunu örnekle daha iyi anlayabiliriz;

Eski;

{{ author !== null && author !== undefined ? author : 'anonymous' }}

 

Yeni;

{{ author ?? 'anonymous' }}

 

 

 

IE11'e elveda

Dünya çapında Internet Explorer kullanımı StatCounter'a göre %1.1 ve NetMarketShare'e göre %1.59 olarak görünüyor.

Bu verilere bakmak isterseniz;

StatCounter: Buraya

NetMarketShare: Buraya

 

Angular'da 12 versiyonu ile beraber IE11'de kullanımdan kaldırıldığına dair uyarı mesajı ekleyecek. Angular 13 ile beraber tamamen desteğini kaldıracak.

 

 

 

Satır içi SASS desteği

Eskiden sass'ı sadece ilgili componentin sass dosyasında yazabiliyorduk. Angular 12 ile beraber artık @Component dekoratörünün styles: [] alanında da sass desteklenecek.

 

Örnek vermek gerekirse, styles bölümünde artık şöyle bir tanımlama yapabileceğiz;

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<h1>Hello {{ title }}</h1>`
  styles: [
  	`
  		$color-red: red;
  		h1 {
    		color: $color-red;
  		}
  	`
  ]
})
export class AppComponent {
  title = 'angular';
}

 

NOT: Mevcut projelerinizde bu özelliği etkinleştirmek için angular.json içerisinde;

"inlineStyleLanguage": "scss"

tanımlamasını yapmanız gerekecektir.

 

 

 

Varsayılan olarak Strict mode ve Production mode

Strict mode Angular 12 ile birlikte artık varsayılan olarak geliyor. Önceden proje oluştururken bize bu modu kullanmak isteyip istemediğimizi soruyordu. Artık varsayılan olarak kullanılacak.

 

Ve derleyicimiz varsayılan olarak production'a çıktı üretecek. Yani artık ng build komutuna --prod eklememize gerek yok.

 

 

 

TypeScript 4.2

Angular 12, TypeScript 4.2'yi destekleyecek.

 

 

 

Mevcut projemizi güncelleyelim

Şimdi, v11 olan projemizi Angular 12'ye nasıl güncelleyeceğiz?

ng update @angular/core@12 @angular/cli@12

Bu komut ile TypeScript sürümü de güncelleyecektir.

 

Eğer Angular Material kullanıyorsanız bir de şu komutu çalıştırın;

ng update @angular/material

 

Bu kadar. 

 

Eğer mevcut projeniz Angular 11'den de eskiyse o zaman sırasıyla güncelleme işlemlerini yapmanız daha sağlıklı olacaktır. Örneğin ilk önce 10 → 11, sonra 11 → 12 gibi.

 

Eğer Repository is not clean. Please commit or stash any changes before updating. şeklinde hata alırsanız, projenizde commit yapmanız gerekmektedir, commit yapmadan güncellemeyi yapmak istiyorsanız çalıştıracağınız komutun sonuna --allow-dirty ekleyebilirsiniz.

 

Angular'ın güncelleme aracına da göz atabilirsiniz: https://update.angular.io/?v=11.0-12.0

 

 

 

Bu yazıyı da burada bitirelim, umarım faydalı olur.

Ayrıca Angular'ın yayınladığı makaleyi de şuraya bırakayım: https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49

 

✋