Karena Angular 6 ada di sini, saya ingin meningkatkan atau memindahkan aplikasi klien angular 5 saya ke angular 6, tetapi saya tidak mendapatkan tutorial atau apa pun yang dapat memandu saya.

Menurut saya, saya hanya perlu menjalankan CLI Angular baru dan kemudian harus memindahkan sumber lama saya ke proyek baru. Saya membaca Angular 6 menggunakan penyaji baru bernama Ivy. Apakah saya harus mengubah proyek saya menurut Ivy?

Tingkatkan versi dari Angular v6 ke Angular v7

Versi 7 dari Angular telah merilis tautan blog resmi Angular . Kunjungi panduan pembaruan sudut resmi https://update.angular.io untuk informasi rinci. Langkah-langkah ini akan berfungsi untuk aplikasi sudut 6 dasar menggunakan Material Angular.

ng update @angular/cli 
ng update @angular/core
ng update @angular/material

Tingkatkan versi dari Angular v5 ke Angular v6

Versi 6 dari Angular telah merilis tautan blog resmi Angular . Saya telah menyebutkan langkah-langkah peningkatan umum di bawah ini, tetapi sebelum dan sesudah pembaruan Anda perlu membuat perubahan dalam kode Anda agar dapat diterapkan di v6, untuk informasi terperinci itu kunjungi situs web resmi https://update.angular.io .

Langkah Peningkatan (sebagian besar diambil dari Panduan Pembaruan Angular resmi untuk aplikasi Angular dasar menggunakan Bahan Angular):

1. Pastikan versi NodeJS adalah 8.9+ jika tidak memperbaruinya.

2. Perbarui Angular cli secara global dan lokal, dan migrasikan konfigurasi lama .angular-cli.json ke format angular.json baru dengan menjalankan berikut ini:

   npm install -g @angular/cli  
   npm install @angular/cli  
   ng update @angular/cli
   

3. Perbarui semua paket kerangka kerja Angular Anda ke v6, dan versi RxJS dan TypeScript yang benar dengan menjalankan yang berikut ini:

   ng update @angular/core
   

4. Perbarui Angular Material ke versi terbaru dengan menjalankan yang berikut ini:

   ng update @angular/material
   

5. RxJS v6 memiliki perubahan besar dari v5, v6 membawa paket kompatibilitas ke belakang rxjs-compat yang akan membuat aplikasi Anda tetap bekerja, tetapi Anda harus merefaktor kode TypeScript sehingga tidak bergantung pada rxjs-compat. Untuk refactor kode TypeScript, jalankan berikut ini:

   npm install -g rxjs-tslint   
   rxjs-5-to-6-migrate -p src/tsconfig.app.json
   

   Catatan: Setelah semua dependensi Anda diperbarui ke RxJS 6, hapus rxjs- compat karena ini meningkatkan ukuran bundel. silakan lihat Panduan Peningkatan RxJS ini untuk info lebih lanjut.

   npm uninstall rxjs-compat
   

6. Selesai menjalankan ng serveuntuk memeriksanya.
   Jika Anda mendapatkan kesalahan dalam pembuatan, lihat https://update.angular.io untuk info rinci.

Tingkatkan versi dari Angular v5 ke Angular 6.0.0-rc.5

1. Tingkatkan rxjs ke 6.0.0-beta.0, silakan lihat Panduan Peningkatan RxJS ini untuk info lebih lanjut. RxJS v6 memiliki perubahan yang melanggar, maka pertama-tama buat kode Anda kompatibel dengan versi RxJS terbaru.

2. Perbarui versi NodeJS ke 8.9+ (ini diperlukan oleh versi angular cli 6)

3. Perbarui paket global cli Angular ke versi berikutnya.

   npm uninstall -g @angular/cli
   npm cache verify
   

   jika versi npm <5 maka gunakan npm cache clean

   npm install -g @angular/cli@next
   

4. Ubah versi paket sudut di file package.json menjadi ^6.0.0-rc.5

   "dependencies": {
     "@angular/animations": "^6.0.0-rc.5",
     "@angular/cdk": "^6.0.0-rc.12",
     "@angular/common": "^6.0.0-rc.5",
     "@angular/compiler": "^6.0.0-rc.5",
     "@angular/core": "^6.0.0-rc.5",
     "@angular/forms": "^6.0.0-rc.5",
     "@angular/http": "^6.0.0-rc.5",
     "@angular/material": "^6.0.0-rc.12",
     "@angular/platform-browser": "^6.0.0-rc.5",
     "@angular/platform-browser-dynamic": "^6.0.0-rc.5",
     "@angular/router": "^6.0.0-rc.5",
     "core-js": "^2.5.5",
     "karma-jasmine": "^1.1.1",
     "rxjs": "^6.0.0-uncanny-rc.7",
     "rxjs-compat": "^6.0.0-uncanny-rc.7",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.5.0",
     "@angular/cli": "^6.0.0-rc.5",
     "@angular/compiler-cli": "^6.0.0-rc.5",
     "@types/jasmine": "2.5.38",
     "@types/node": "~8.9.4",
     "codelyzer": "~4.1.0",
     "jasmine-core": "~2.5.2",
     "jasmine-spec-reporter": "~3.2.0",
     "karma": "~1.4.1",
     "karma-chrome-launcher": "~2.0.0",
     "karma-cli": "~1.0.1",
     "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "postcss-loader": "^2.1.4",
     "protractor": "~5.1.0",
     "ts-node": "~5.0.0",
     "tslint": "~5.9.1",
     "typescript": "^2.7.2"
   }
   

5. Selanjutnya perbarui paket lokal cli Angular ke versi berikutnya dan instal paket yang disebutkan di atas.

   rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows 
   Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell
   npm install --save-dev @angular/cli@next
   npm install 
   

6. Format konfigurasi Angular CLI telah diubah dari versi angular cli 6.0.0-rc.2, dan konfigurasi Anda yang ada dapat diperbarui secara otomatis dengan menjalankan perintah berikut. Ini akan menghapus file konfigurasi lama .angular-cli.json dan akan menulis file angular.json baru .

   ng update @angular/cli --migrate-only --from=1.7.4

Catatan: - Jika Anda mendapatkan kesalahan berikut "The Angular Compiler membutuhkan TypeScript> = 2.7.2 dan <2.8.0 tetapi yang ditemukan 2.8.3". jalankan perintah berikut:

npm install [email protected]

Angular 6 baru saja dirilis.

https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

Inilah yang berhasil untuk salah satu proyek kecil saya

1. npm instal -g @ angular / cli
2. npm install @ angular / cli
3. ng perbarui @ angular / cli --migrate-only --from = 1.7.0
4. ng update @ angular / core
5. npm instal rxjs-compat
6. ng melayani

Anda mungkin perlu memperbarui skrip jalankan Anda di package.json Misalnya. jika Anda menggunakan tanda seperti "app" dan "lingkungan" Ini telah diperbarui masing-masing menjadi "proyek" dan "konfigurasi".

Lihat https://update.angular.io/ untuk panduan lebih rinci.

Cukup gunakan panduan peningkatan resmi yang akan memberi tahu Anda apa yang perlu Anda lakukan untuk kebutuhan khusus Anda sendiri:

https://update.angular.io/

Periksa detail peningkatan langkah demi langkah dari Angular 5 ke Angular 6. Ini memberikan detail tentang masalah yang Anda hadapi selama peningkatan dan cara mengatasinya.

• Perbarui versi node Anda ke 8 atau lebih tinggi dan Instal Angular cli terbaru secara global dengan npm i -g @ angular / cli @ latest.
• Angular 6 menggunakan angular.json sebagai file konfigurasi, bukan .anguar-cli.json. Tslint juga telah diubah. Periksa https://github.com/angular/angular-cli/wiki/angular-workspace untuk detail konfigurasi terbaru. Anda harus memindahkan konfigurasi apa pun yang ada ke file konfigurasi baru.
• Untuk melakukan ini, buat proyek dummy lain dengan cli terbaru menggunakan 'proyek-Anda' baru dan default yang sama seperti prefiks, gaya dll yang Anda gunakan sebelumnya untuk proyek Anda. Buat proyek baru dengan cli https://github.com/angular/angular-cli/wiki/new
• Gunakan https://update.angular.io/ untuk memeriksa apa yang telah diubah dari versi Angular → Angular 6. Ini menyediakan penggunaan bagaimana mengubah / memperbaikinya.
• Ikuti langkah-langkah di atas dan salin / perbarui file angular.json yang dibuat pada langkah2. Lakukan npm i dalam proyek Anda untuk mendapatkan semua dependensi dan lakukan pembaruan npm
• Sekarang sampai pada bagian besarnya. Upgrade RxJS dan menyelesaikan konflik. RxJS telah membakukan impor operator dan pembuat yang dapat diamati dengan rilis ini. Lakukan npm i -g rxjs-tslint dan tambahkan konfigurasi lint di bawah ini di tslint.json

{
  "rulesDirectory": [
    "node_modules/rxjs-tslint"
  ],
  "rules": {
    "rxjs-collapse-imports": true,
    "rxjs-pipeable-operators-only": true,
    "rxjs-no-static-observable-methods": true,
    "rxjs-proper-imports": true
  }
}

• Sekarang jalankan lint --fix. Ini memperbaiki beberapa item tetapi sebagian besar masalah yang tersisa akan disorot dan Anda harus memperbaikinya secara manual.

Perubahan Nama Operator:

do -> tap, 
catch -> catchError, 
switch -> switchAll, 
finally -> finalize

Semua operator pindah ke rxjs / operator

import { map, filter, reduce } from 'rxjs/operators';

Metode pembuatan yang dapat diamati dipindahkan ke rxjs

   import { Observable, Subject, of, from } from 'rxjs'; 

Anda sudah siap. Selamat datang di Angular 6 :) Periksa posting blog saya di sini tentang cara meningkatkan

Saya harus menjalankan ulang pembaruan @ angular / cli agar angular-cli.json diubah menjadi angular.json

Silakan jalankan komentar di bawah ini untuk memperbarui ke Angular 6 dari Angular 5

1. ng perbarui @ angular / cli
2. ng update @ angular / core
3. npm install rxjs-compat (Untuk mendukung versi lama rxjs 5.6)
4. npm install -g rxjs-tslint (Untuk mengubah dari format rxjs 5 ke rxjs 6 dalam kode. Instal secara global maka hanya akan berfungsi)
5. rxjs-5-to-6-migrate -p src / tsconfig.app.json (Setelah menginstal kita harus mengubahnya di kode sumber kita ke format rxjs6)
6. npm uninstall rxjs-compat (Hapus ini akhirnya)

Panduan lengkap

----------------- Dengan angular-cli --------------------------

1. Perbarui CLI secara global dan lokal

1. Menggunakan NPM (pastikan Anda memiliki node versi 8+)

   npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest npm i @angular/cli --save

2. Menggunakan Benang

   yarn remove @angular/cli yarn global add @angular/cli yarn add @angular/cli

2. Perbarui dependensi

ng update @angular/cli
ng update @angular/core
ng update @angular/material
ng update rxjs

Angular 6 sekarang bergantung pada TypeScript 2.7 dan RxJS 6

Biasanya itu berarti Anda harus memperbarui kode Anda di mana pun impor dan operator RxJS digunakan, tetapi untungnya ada paket yang menangani sebagian besar pekerjaan berat:

npm i -g rxjs-tslint 

//or using yarn

yarn global add rxjs-tslint

Kemudian Anda dapat menjalankan rxjs-5-to-6-migrate

rxjs-5-to-6-migrate -p src/tsconfig.app.json

akhirnya hapus rxjs-compat

npm uninstall rxjs-compat

// or using Yarn

yarn remove rxjs-compat

Lihat tautan ini https://alligator.io/angular/angular-6/

------------------- Tanpa angular-cli -------------------------

Jadi, Anda harus memperbarui package.jsonfile Anda secara manual .

Lalu lari

 npm update
 npm install --save rxjs-compat
 npm i -g rxjs-tslint
 rxjs-5-to-6-migrate -p src/tsconfig.app.json

Seperti yang ditunjukkan Vinay Kumar bahwa itu tidak akan memperbarui CLI Angular yang diinstal secara global. Untuk memperbaruinya secara global cukup gunakan perintah berikut:

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

Catatan jika Anda ingin memperbarui proyek yang ada, Anda harus memodifikasi proyek yang ada, Anda harus mengubah package.json di dalam proyek Anda.

Tidak ada perubahan yang merusak di Angular itu sendiri tetapi ada di RxJS, jadi jangan lupa untuk menggunakan pustaka rxjs-compat untuk bekerja dengan kode lama.

  npm install --save rxjs-compat  

Saya menulis artikel yang bagus tentang instalasi / memperbarui CLI Angular http://bmnteam.com/angular-cli-installation/

cukup jalankan perintah berikut:

ng update

catatan: ini tidak akan diperbarui secara global.

Beginilah cara saya membuatnya bekerja.

Lingkungan Saya:

CLI Angular Global: 6.0.0, Lokal: 1.7.4, Angular: 5.2, Ketikan 2.5.3

Catatan: Untuk mengaktifkan ng UpdateAnda perlu menginstal Angular CLI 6.0 terlebih dahulu npm install -g @angular/cli or npm install @angular/cli

1. ng update //update Angular Package core/common/complier... to 6.0.0

2. ng update @angular/cli //change angular-cli.json to angular.json

opsional jika Anda memiliki bahan sudut 5.4.2, ngx-translate 9.1.1, ng-bootstrap / ng-bootstrap 1.1.1:

3. ng update @angular/material //upgrade to 6.0.1

4. npm install @ngx-translate/[email protected] --save //upgrade ngX translate to 10.0.1 for Angular 6

5 npm install --save @ng-bootstrap/[email protected] //for ng-bootstrap

Jika Anda menggunakan Observable dan mendapatkan error:

ERROR in node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'. node_modules/rxjs/observable/of.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/observable/of'.

Perubahan: import { Observable } from "rxjs/Observable"; import { of } from 'rxjs/observable/of';

Untuk

import { Observable, of } from "rxjs";

Masalah CLI Angular: https://github.com/angular/angular-cli/issues/10621

Ada beberapa langkah untuk meningkatkan 2/4/5 ke Angular 6.

npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
npm install

Untuk memperbaiki masalah yang terkait dengan "angular.json": -

ng update @angular/cli --migrate-only --from=1.7.4

Simpan MIGRATION
https://github.com/ngrx/platform/blob/master/MIGRATION.md#ngrxstore

RXJS MIGRATION
https://www.academind.com/learn/javascript/rxjs-6-what-changed/

Berharap ini akan membantu Anda :)