Angular 14 ten Angular 15 e Geçiş Adımları¶

Check-in yapılmamış değişikliklerin olması durumunda değişiklikler checkin yapılır. Github üzerine gönderilmesi tavsiye edilir.
https://nodejs.org/download/release/v16.13.0/ adresinden node.js 16.13.0 sürümünün indirilmesi gerekmektedir. İndirme linki : https://nodejs.org/download/release/v16.13.0/node-v16.13.0-x64.msi . İndirme işleminden sonra kurulum yapılmalıdır. Kurulum işlemi tamamlandıktan sonra terminal açılır ve node -v komutu çalıştırılır. Sonuç olarak 16.13.0 sürümünün yüklendiği görülür.

NOT : Nodejs son sürümlerinde hatalar çıkabildiği için 16.13.0 sürümünün yüklenmesi önemlidir.

Global Angular Cli yüklenir >>

npm install -g @angular/cli@15.1.3

(NOT : BU İŞLEMİN SADECE 1 DEFA YAPILMASI YETERLİDİR. GLOBAL OLARAK YÜKLEME GERÇEKLEŞTİRİLİR)

Angular projesinin ana dizininde terminal açılır. npm install komutu çalıştırılır. Sonrasında şu komut çalıştırılır

ng update @angular/core@15.1.0 @angular/cli@15.1.3 --force

-- NOT : Komut çalışması uzun sürebilir, stabilite için 15.1.0 sürümünün yüklenmesi önemlidir

Bazı paketler Angular 15 ile uyumlu olmayabilir, yükseltme işleminden sonra sayfalarınızı kontrol etmeniz iyi olacaktır.
package.json dosyanızda yer alan aşağıdaki paketlerin sürümlerini değiştirmeniz gerekmektedir. (octapull.core paketinin son versiyonunun yüklenmesi önerilir)

dependencies kısmı için aşağıdakipaket versiyonları yüklenmelidir.

    "@alpata/octapull.core": "^15.0.7",
    "@angular/cdk": "^15.1.0",
    "@ng-bootstrap/ng-bootstrap": "11.0.0",
    "bootstrap": "4.6.0",
    "@auth0/angular-jwt": "^5.1.2",
    "@fortawesome/angular-fontawesome": "^0.12.1",
    "@fortawesome/fontawesome-free": "^6.2.1",
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-brands-svg-icons": "^6.2.1",
    "@fortawesome/free-regular-svg-icons": "^6.2.1",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "@ng-select/ng-select": "^10.0.3",
    "dayjs": "^1.11.7",
    "feather-icons": "^4.29.0",
    "file-saver": "^2.0.5",
    "metismenujs": "1.2.1",
    "ngx-bootstrap": "6.2.0",
    "guid-typescript": "^1.0.9",
    "jquery": "3.4.1",
    "jspdf": "^2.5.1",
    "jspdf-autotable": "^3.5.28",
    "ng-lazyload-image": "^9.1.3",
    "ng2-pdf-viewer": "^9.1.3",
    "ngx-currency": "^3.0.0",
    "ngx-infinite-scroll": "^15.0.0",
    "ngx-perfect-scrollbar": "^10.1.1",
    "ngx-progressbar": "^9.0.0",
    "ngx-quill": "^20.0.1",
    "ngx-toastr": "^16.0.2",
    "ngx-ui-loader": "^13.0.0",
    "ngx-webstorage": "^11.1.1",
    "primeicons": "^6.0.1",
    "primeng": "^15.1.1",
    "quill": "^1.3.7",
    "rxjs": "~7.8.0",
    "tslib": "^2.4.1",
    "xlsx": "^0.18.5",
    "zone.js": "~0.12.0"

devDependencies kısmı için aşağıdakipaket versiyonları yüklenmelidir.

    "@angular-devkit/build-angular": "^15.1.1",
    "@angular-eslint/builder": "15.1.0",
    "@angular-eslint/eslint-plugin": "15.1.0",
    "@angular-eslint/eslint-plugin-template": "15.1.0",
    "@angular-eslint/schematics": "15.1.0",
    "@angular-eslint/template-parser": "15.1.0",
    "@angular/cli": "^15.1.3",
    "@angular/compiler-cli": "^15.1.0",
    "@angular/language-service": "^15.1.0",
    "@schematics/angular": "^15.1.1",
    "@typescript-eslint/eslint-plugin": "5.48.1",
    "@typescript-eslint/parser": "5.48.1",
    "eslint": "^8.31.0",

Aşağıdaki gibi hata vermesi durumunda npm install --save-dev ajv@^7 komutu ile projeye ilgili paket yüklenir.

An unhandled exception occurred: Cannot find module 'ajv/dist/compile/codegen'

An unhandled exception occurred: Cannot find module 'ajv/dist/compile/codegen'
Require stack:
- C:\Gitlab\OctaPull-Order\Source\OctaPull.Order.Web\node_modules\ajv-keywords\dist\definitions\typeof.js
- C:\Gitlab\OctaPull-Order\Source\OctaPull.Order.Web\node_modules\ajv-keywords\dist\keywords\typeof.js
- C:\Gitlab\OctaPull-Order\Source\OctaPull.Order.Web\node_modules\ajv-keywords\dist\keywords\index.js
- C:\Gitlab\OctaPull-Order\Source\OctaPull.Order.Web\node_modules\@angular-devkit\build-webpack\src\webpack-dev-server\index.js
- C:\Gitlab\OctaPull-Order\Source\OctaPull.Order.Web\node_modules\@angular-devkit\build-webpack\src\index.js
- C:\Gitlab\OctaPull-Order\Source\OctaPull.Order.Web\node_modules\@angular-devkit\build-angular\src\builders\dev-server\index.js
- C:\Gitlab\OctaPull-Order\Source\OctaPull.Order.Web\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
- C:\Gitlab\OctaPull-Order\Source\OctaPull.Order.Web\node_modules\@angular-devkit\architect\node\index.js
- C:\Gitlab\OctaPull-Order\Source\OctaPull.Order.Web\node_modules\@angular\cli\src\command-builder\architect-base-command-module.js
- C:\Gitlab\OctaPull-Order\Source\OctaPull.Order.Web\node_modules\@angular\cli\src\command-builder\architect-command-module.js
- C:\Gitlab\OctaPull-Order\Source\OctaPull.Order.Web\node_modules\@angular\cli\src\commands\build\cli.js
- C:\Gitlab\OctaPull-Order\Source\OctaPull.Order.Web\node_modules\@angular\cli\src\command-builder\command-runner.js
- C:\Gitlab\OctaPull-Order\Source\OctaPull.Order.Web\node_modules\@angular\cli\lib\cli\index.js
- C:\Gitlab\OctaPull-Order\Source\OctaPull.Order.Web\node_modules\@angular\cli\lib\init.js
See "C:\Users\musta\AppData\Local\Temp\ng-wHK17H\angular-errors.log" for further details.

npm install komutu çalıştırılır ve proje çalıştırılır.
Aşağıdaki gibi hata vermesi durumunda angular.json dosyası açılır ve "styles": ["node_modules/ol/ol.css"] bölümüne ilgili css dosyası eklenir. Değişikliklerin algılanması için projeyeniden başlatılmalıdır. ("node_modules/ol/ol.css")

./node_modules/ol/ol.css:1:0 - Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .ol-box {
|   box-sizing: border-box;
|   border-radius: 2px;