Adım adım Angular 9 güncellemesi nasıl yapılır?

Merhaba,


7 Şubat'ta Angular 9.0 versiyonunu yayınladı. Merak edilen ivy artık varsayılan derleyici olarak ayarlanmış oldu ve Angular bu versiyonu son 3 yılda yapılan en büyük güncellemelerden biri olarak değerlendirdi. Şimdi mevcut projelerinizi Angular 9'a nasıl güncelleyebilirsiniz bunu adım adım anlatacağım.


Güncelleme öncesi not: Komutlarınızı çalıştırdığınızda Repository is not clean. Please commit or stash any changes before updating. şeklinde hata alırsanız eğer, commit yapmanız gerekiyordur. Commit yaparsanız bu hatayı vermez, ama commit yapmadan komutları çalıştırmak istiyorsanız sonuna --allow-dirty yazabilirsiniz.


Evet başlayalım;


1-) İlk olarak Node.js güncellemesini yapıyoruz. 10.13 ve üzeri olmalı. Siz güncelleyin son sürüme;

https://nodejs.org sitesinden son versiyonu indirip kurabilirsiniz. Kurulumu yaptıktan sonra terminal'de aşağıdaki komutu yazarak kurulumun başarılı olduğundan emin olun

node -v 


2-) İlk olarak Angular'ı 8 e güncellemek gerekiyor.

ng update @angular/[email protected] @angular/[email protected]

Angular projemin versiyonu zaten 8 o yüzden buna gerek yok demeyin. Ben "buna gerek yok" dedim sonra tıpış tıpış en baştan bu komut ile başladım :)


Eğer önce bu komutu çalıştırmazsanız neredeyse her adımda hata alacaksınız. O hataların çözümleri tabiki var ama en son build etmeye geldiğinizde anlıyorsunuz ki o kadar hatayı çözmekle boşuna uğraşmışsınız :) O yüzden ilk önce 8'e güncelleme komutunu mutlaka çalıştırın :)


3-) Angular 9'a güncellemeyi yapacak olan komutumuzu çalıştırıyoruz;

ng update @angular/core @angular/cli

Burada eğer bir sıkıntı yoksa epey işlem yapacak. Birçok paketin güncellemesini bu komut yapacak.

Komutu çalıştırdığınızda uyarı veren paketler çıkarsa onlarıda güncellemeniz gerekiyor veya kullanımdan kalkan bir paket ise silmeniz gerekiyor.


Bu komut başarıyla tamamlanırsa tebrikler artık projeniz Angular 9.


4-) Eğer Angular Material kullanıyorsanız onuda güncellemeniz gerekiyor;

ng update @angular/material

Artık Angular Material'de kullandığımız bileşenleri import ederken '@angular/material' içerisinden import etmiyoruz. Hangi bileşeni kullanıyorsak onun bulunduğu klasörden import ediyoruz.

Yani eskiden şöyle olan bir kod;

import {
  MatIconModule,
  MatButtonModule,
  MatFormFieldModule
} from '@angular/material';

Artık şöyle;

import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';

Tabi ng update @angular/material komutu bu düzenlemeleri bizim için yapıyor. Yani tek tek değiştirmenize gerek yok.


5-) Eğer projenizde başka paketler kullanıyorsanız onlarıda güncellemelisiniz;

npm outdated

Bu komut, projenizdeki yeni sürümü olan paketleri gösterir. Bu paketleride güncellemeniz gerekebilir.

Örneğin bende @fortawesome/angular-fontawesome paketi vardı 0.5.0 versiyonu kuruluydu. Bu, güncelleme yaparken uyarı veriyordu o yüzden bu paketin resmi adresinde Angular 9 için yayınlanan bir sürümü var mı diye kontrol edip 0.6.0 versiyona güncellemem gerekti.


Aynı şekilde PrimeNG paketini kullanıyorsanız başınıza bela olabilir. ng serve komutunu çalıştırdığımda bu paket yüzünden çok hata aldım. Tabi çalıştıramadığınız projeyi derleyemiyorsunuzda. "9.0.0-rc.4" sürümüne güncelledim. Ama kullanımda değişiklikler olmuş, aynı Angular Material'de olduğu gibi bunda da kullandığınız bileşenleri kendi klasöründen import etmeniz gerekiyor. Aynıca örneğin ConfirmDialogModule'i kullanıyorsanız bunu kullandığınız componentin ts dosyasında da ConfirmDialog'u import etmeniz gerekiyor. Yoksa hata veriyor.


6-) package.json dosyasında postinstall scriptini ekliyoruz;

package.json dosyasında scripts içerisinde eğer yoksa şu eklemeyi yapıyoruz;

"postinstall": "ngcc"

Bununla ilgili olarak şu linki inceleyebilirsiniz.



ng serve komutu ile projenizi başlattığınızda ngcc çalışacak ve uzun bir derleme işlemi yapabilir. Sabırla bekleyin. Yeni bir paket kurduğunuzda da ngcc otomatik olarak çalışacaktır.


Evet güncelleme işlemimiz bu kadar. Angular 8'deki paket boyutları, Angular 9'a geçtikten sonra nasıl değişiklik gösterdi onu anlatacağım bir yazı da gelecek.


Umarım faydalı olur.

Mehmet Sert

HTML, CSS, Javascript ve Angular konularında tecrübe edinmiş ve Bursa'da Frontend Developer olarak bir firmada görev almaktayım. Yeni teknolojilere meraklıyım, öğrendiklerimi uygulayarak ve anlatarak pekiştirmeyi seviyorum....

"Adım adım Angular 9 güncellemesi nasıl yapılır?" için 9 yorum yapıldı.
R.İ
Recep İLİK 18 Şubat 2020

Merhabalar, Angular 9 ile php kullanmadan mysql e nasıl bağlanabilirim, NodeJs ile derseniz eğer js dosyalarını ts dosyalarına nasıl import edebilirim?

Mehmet Sert (Yazı sahibi)24 Şubat 2020

Merhaba, Bugüne kadar ihtiyacım olmadığı için denemedim ancak Node.js'i ayrı bir şekilde çalıştırman gerekir diye düşünüyorum. Merak ettiğim için en kısa sürede deneyeceğim bunu.

Y.E
Yunus Emre BAKAÇ 02 Nisan 2020

@Recep İLİK, NodeJS dosyalarını import edemezsiniz. Çünkü Angular ile sadece Front-end tarafında işlem yapabilirsiniz. Sizin express-js (veya herhangi bir serveri) ve mysql bağlantınızın sürekli aktif olacak bir nodejs serverde çalışması gerekir. Ardından bu servere Angular ile Post-get yaparak işlem sağlayabilirsiniz. Doğrudan Angular içerisinde bir mysql bağlantısı kurmayı başarsanız dahi, bu işlem mantıklı değildir. Eğer siz farklı bir servis yazmıyorsanız ben kişisel olarak Firebase Cloudstore kullanıyorum, size de tavsiye ederim. Firebase Auth(Üyelik) sistemi /src/app/core/services/auth.service.ts Firebase Cloudstore (Veritabanı) sistemi /src/app/pages/articles/articles.component.ts Eğer ki maddi açıdan bir problem varsa, MongoDB kullanabilirsiniz, onu angulara bağlayabilirsiniz. https://www.mongodb.com/cloud/atlas/signup Buradan ücretsiz bir online veritabanı oluşturabilirsiniz.

Mehmet Sert (Yazı sahibi)02 Nisan 2020

Değerli yorumun için teşekkür ederim Yunus Emre BAKAÇ.

Y.E
Yunus Emre BAKA. 04 Nisan 2020

Rica ederim, bir önceki yorumumda link eklemeyi unutmuşum. https://github.com/yunusemrebakac/cms-blog Firebase Auth(Üyelik) sistemi /src/app/core/services/auth.service.ts Firebase Cloudstore (Veritabanı) sistemi /src/app/pages/articles/articles.component.ts Ayrıca web sitesi için bir kaç önerim olacak, mail adresi göremediğim için yoruma yazıyorum kalabalığı gidermek amacıyla yorumumun bu kısmını daha sonra silebilirsiniz. 1- Yorum atan kullanıcılar için Gravatar eklenmesi, 2- Yorum yapan kişilerin eğer hesabı varsa ismine tıklayınca profillerine yönlendirebilir. 3- Yorumları yorumlama, alt yorum... NoSQL Kullanmıyorsanız eğer yapmasanızda olur :)

Mehmet Sert (Yazı sahibi)04 Nisan 2020

Önerilerin için teşekkür ederim. Düzenlenmesi gereken başka maddelerimiz de var ama pek vakit ayıramadık. Şu karantina günlerinde biraz düzenlemeler yapsak fena olmaz :)

R
Ramazan 16 Temmuz 2020

Merhabalar derslerinizi inceliyorum. Fakat su sekilde bir sorunum var. Bu sorun versiyon güncellemesindenmi kaynaklı oluyor. visual stdio da acıp komutları package managerdan giriyorum. Teşekkürler node.exe : The serve command requires to be run in an Angular project, but a project definition could not be found. At C:\Users\ramazan\AppData\Roaming\npm\ng.ps1:15 char:3

Mehmet Sert (Yazı sahibi)17 Temmuz 2020

Merhaba, Hatayı çözmek için neler denediğini bilmiyorum ama angular cli güncellemesi yapman gerekiyor sanırım. Yani npm install -g @angular/cli ile güncelleme yapıp tekrar dener misin?

R
Ramazan 18 Temmuz 2020

Merhabalar ilk önce geri dönüşünüz için teşekkür ederim. İlk defa angular ile çalışmaya başladım. Yazılarınız gayet iyi. Yavaş yavaş hataların neden oldugunu çözmeye başladım gibi. İyi akşamlar.

Yorum yap * E-posta adresiniz yayınlanmayacak.