Ana içeriğe geç

Angular 12 den Angular 13 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.
  • Global Angular Cli yüklenir >>
npm install -g @angular/cli@13.2.6
  • Angular projesinin ana dizininde terminal açılır ve şu komut çalıştırılır
npx @angular/cli@13.2.6 update @angular/core@13.2.6 @angular/cli@13.2.6 --force

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

  • Bazı paketler Angular 13 ile uyumlu olmayabilir, yükseltme işlemindne 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)
   "@alpata/octapull.core": "^13.0.6",
    "@fortawesome/angular-fontawesome": "^0.10.1",
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@fortawesome/fontawesome-svg-core": "^1.3.0",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@auth0/angular-jwt": "^5.0.1"
    "@ng-bootstrap/ng-bootstrap": "^11.0.0",
    "@sweetalert2/ngx-sweetalert2": "^9.0.0",
    "sweetalert2": "^10.16.9",
    "ngx-progressbar": "^8.0.0",
    "feather-icons": "^4.28.0",
    "ngx-perfect-scrollbar": "^10.1.0",
    "@ng-select/ng-select": "^8.1.1",
    "ngx-toastr": "^14.1.0",
    "lodash": "^4.17.21",
    "@swimlane/ngx-charts": "^18.0.1",
    "ngx-mask": "^13.1.1",
    "ngx-ui-loader": "^11.0.0",
    "metismenujs": "^1.2.1",
    "ng-lazyload-image": "^9.1.0",
    "file-saver": "^2.0.5",
    "dayjs": "^1.10.8",
    "jspdf": "^2.5.1",
    "jspdf-autotable": "^3.5.23",
    "xlsx": "^0.18.3",
    "ngx-webstorage": "^9.0.0",
    "primeicons": "^5.0.0",
    "primeng": "^13.2.1",
    "ngx-infinite-scroll": "^10.0.1",
    "ngx-markdown": "^13.1.0",
    "angular-gridster2": "^13.1.1",
    "chart.js": "^3.6.0",
    "chartjs-plugin-datalabels": "^2.0.0",
    "ol": "^6.5.0",
    "filepond": "^4.30.3",
    "filepond-plugin-file-poster": "^2.5.1",
    "filepond-plugin-file-validate-type": "^1.2.6",
    "filepond-plugin-get-file": "^1.0.7",
    "filepond-plugin-image-preview": "^4.6.10",
    "filepond-plugin-media-preview": "^1.0.11",
    "ngx-filepond": "^6.0.1",
    "guid-typescript": "^1.0.9",
    "ngx-quill": "^16.1.2",
    "angular-archwizard": "^6.1.0",
    "animate.css": "^4.1.1",
    "bootstrap": "^4.6.0",
    "google-libphonenumber": "^3.2.17",
    "intl-tel-input": "^17.0.3",
    "jquery": "^3.4.1",
    "ng2-pdf-viewer": "^8.0.1",
    "ngx-intl-tel-input": "^3.0.5",
    "ngx-bootstrap": "^6.2.0",
    "quill": "^1.3.7",

  • styles.scss dosyası içerisinde yer alan _global.scss şu şekilde değiştirilir

  • @import "node_modules/alpata/octapull.core/_global.scss";

  • Aşağıdaki tanımlamalar app.module içerisinden silinir

NgxWebstorageModule.forRoot({
  prefix: "",
  separator: "",
  caseSensitive: true
  }),
SweetAlert2Module.forRoot(),
ToastrModule.forRoot(),
  • Yükseltme sonrasında dayjs veya filepond (function is not found) hata vermesi durumunda tsconfig.json dosyası içerisinde yer alan compilerOptions içerisine "allowSyntheticDefaultImports": true satırı eklenir. Sonrasında örnek importlar aşağıdaki gibi * olmadan olacak şekilde revize edilir
    import  FilePondPluginFileValidateType  from  'filepond-plugin-file-validate-type';
    import  FilepondPluginImagePreview  from  'filepond-plugin-image-preview';

    import  dayjs  from  'dayjs';
    import  utc  from  'dayjs/plugin/utc';
    import  timezone  from  'dayjs/plugin/timezone';
    import  isLeapYear  from  'dayjs/plugin/isLeapYear';
    import  'dayjs/locale/tr'; // import locale

NOT : Hata alınmaması durumunda değişiklik yapılmasına gerek yoktur