Bermigrasi dari AngularJS ke Angular7 melalui aplikasi hybrid

Bermigrasi dari AngularJS ke Angular7 melalui aplikasi hybrid

Tugas ini bukan yang termudah, tetapi bisa dilakukan.

Saya bertemu dengannya ketika pindah ke perusahaan baru.

Fakta bahwa itu bisa dilakukan dapat ditemukan dalam manual .

Itu dibuat khusus untuk menyederhanakan transisi tanpa perlu membuat proyek baru dan menulis ulang setiap komponen dari awal.

Seperti yang dipahami oleh pengembang, proyek kami harus mulai bekerja baik pada AngularJS dan pada Angular versi baru dengan penggantian kode secara bertahap.

Jadi saya memutuskan untuk melakukannya.

Panduan ini cukup rinci, tetapi pada dasarnya berisi bagian teoretis.

Bagi seseorang yang terbiasa berurusan terutama dengan Vue, segera memahami seluk-beluk kerangka pengorganisasian tidak begitu sederhana.

Kesulitan utama bagi saya adalah bahwa struktur proyek pada AngularJS dan Angular7 berbeda.

Karenanya kebutuhan untuk menulis ulang semua dependensi, layanan, dan komponen secara manual.

Faktanya, setiap hibriditas dengan pendekatan ini kehilangan maknanya, karena aplikasi dalam kasus apa pun harus sepenuhnya ditulis ulang.

Jadi saya lakukan pada awalnya, tidak menemukan cara yang lebih murah.

Namun, ada opsi yang lebih baik.

Di sini saya menemukan banyak manfaat.

Saya akan menjelaskan secara rinci apa yang saya lakukan.

Anda perlu membuat proyek baru.

Di Node.js:

npm install -g @angular/cli

Instal Angular secara global.

Selanjutnya, Anda perlu membuat folder untuk aplikasi dan masuk melalui Node.js.

Perintah utama yang mungkin diperlukan di sini untuk menemukan folder yang diinginkan:

cd _ dan cd .. untuk kembali ke direktori di atas.

Jadi, ketika folder proyek ditemukan, Anda perlu membuat proyek di dalamnya.

Di Node.js kita menulis:

ng new _

Dalam proses pembuatan proyek, Anda akan ditawari beberapa opsi untuk aplikasi, di mana Anda perlu menentukan parameter yang diinginkan.

Ketika aplikasi dibuat, Anda dapat membukanya di browser dengan perintah:

ng serve --open

Namun, belum ada yang dibuka.

Sekarang Anda harus menginstal dependensi yang diperlukan agar AngularJS dan Angular berfungsi:

npm install --save @angular/upgrade

Mulai sekarang, aplikasi mendukung kedua kerangka kerja.

Sekarang buka proyek lama, cari file package.json.

Ini mencantumkan semua dependensi yang diperlukan untuk pengoperasian aplikasi kita.

Mereka perlu diinstal secara manual.

Sebagai contoh:

npm install --save angular @uirouter/angularjs

Setelah langkah ini, Anda dapat mentransfer semua gaya global ke aplikasi baru.

Sekarang kami mentransfer semua file dari aplikasi.

Untuk panduan di atas, kita melangkah lebih jauh.

Ubah nama komponen root.

Di app.module.ts tambahkan baris:

 import * as angular from 'angular'; 

Ini tidak ditunjukkan dalam manual, tetapi tanpanya hibridisasi tidak dapat dicapai.

Sekarang kami memiliki aplikasi, yang secara teori harus hibrida.

Dalam praktiknya, berbagai kesalahan dapat terjadi pada tahap ini, terutama terkait dengan dependensi, yang akan saya tulis di artikel terpisah.

Jika tidak muncul, lanjutkan dan ubah modul setelah modul AngularJS menjadi Angular versi yang diinginkan.

Artikel ini memberikan representasi visual yang sangat baik dari perbedaan utama antara kode dari dua kerangka kerja.

Langkah demi langkah, dan Anda tidak akan memiliki satu baris tersisa di AngularJS.