AngularJS + Angular (v6) hybrid (akhirnya!)

Akhirnya tiba waktunya untuk mewujudkannya! Saya telah menjalankan dan memelihara situs web selama sekitar 2,5 tahun sekarang. Situs web ini dibangun dengan AngularJS (v1.6.9). Ini berfungsi dengan cukup baik, tetapi tidak ada apa-apanya dibandingkan dengan versi Angular yang lebih baru. Jadi saya akhirnya mengambil langkah pertama untuk memigrasikan semuanya ke versi yang lebih baru, secara bertahap. Inilah cara saya melakukannya:

Buat proyek CLI Angular baru
Salin & konversi semua file JavaScript ke TypeScript
Mengganti URL template absolut dengan URL relatif
Menyesuaikan pengaturan Angular CLI untuk mengakomodasi AngularJS
Menyertakan AngularJS di aplikasi Angular Anda

Buat proyek CLI Angular baru

Karena tidak ada seorang pun yang ingin menciptakan kembali roda, ikuti panduan “resmi” ini untuk membuat proyek baru: https://angular.io/guide/quickstart

Salin & konversi semua file JavaScript ke TypeScript

Ini mungkin tampak cukup mudah, padahal… pada awalnya, tetapi ada lebih dari sekedar mengubah ekstensi file. Untuk mengganti nama semua file dari “.js” menjadi “.ts”, Anda dapat melakukan apa pun yang Anda inginkan. Anda dapat melakukannya secara manual, dengan ekstensi NPM, atau melalui Terminal Anda. Saya memilih untuk menggunakan ekstensi NPM: Renamer. Jika Anda ingin menggunakan yang sama, ikuti perintah selanjutnya:

npm i -g renamer

dan untuk benar-benar mengganti nama file:

renamer --find '.js' --replace '.ts' 'root/folder/of/app/**/*.js'

Ini akan mengganti nama semua file JavaScript Anda menjadi file TypeScript. Selanjutnya, jika Anda belum bekerja dengan ES6/ES2015, Anda sebaiknya mengonversi Javascript Anda ke format ini. TypeScript tidak berfungsi dengan fungsi non-panah. Selain itu, Anda sebaiknya mulai menggunakan perintah “impor” dan “ekspor” JavaScript, bukan “memerlukan”. Ini akan membantu Webpack (terintegrasi dengan Angular CLI) membangun aplikasi Anda nanti.

Setelah Anda mengganti nama dan menulis ulang kode Anda, Anda dapat menyalinnya ke proyek Angular CLI yang Anda buat sebelumnya. Ikuti panduan berikut, dari “Buat rantai impor” hingga Anda mencapai “Konfigurasi CLI Angular”: Membuat hibrida. Pada titik ini, Anda seharusnya sudah memiliki semua file dalam format TypeScript dan diintegrasikan ke dalam proyek Angular CLI "baru" Anda.

Mengganti URL template absolut dengan URL relatif

Pada titik ini, Anda sudah dapat mulai mengkompilasi aplikasi Anda, namun Anda akan mengalami kesalahan jika Anda telah menggunakan URL template absolut seperti saya. CLI Angular menggunakan Webpack untuk mengkompilasi file TypeScript-nya ke dalam Javascript dan kemudian ke dalam satu bundel. Webpack mengharuskan Anda menggunakan jalur relatif. Jadi sekarang ganti semua jalur templat absolut Anda dengan jalur relatif. Ini dapat ditemukan di arahan (atau komponen), router Anda, atau pengontrol apa pun.

Menyesuaikan pengaturan Angular CLI untuk mengakomodasi AngularJS

Pada titik ini, Anda akan dapat mengkompilasi aplikasi hibrid Anda sepenuhnya, tetapi hanya untuk tujuan pengembangan. Setelah Anda mencoba mengkompilasi aplikasi Anda dengan tanda produksi:

ng build --prod

Anda tidak akan dapat memuat aplikasi di browser Anda. Ini karena Webpack akan mencoba menyelesaikan setiap dan semua fungsi untuk mengkompilasinya menjadi Javascript dasar. Ini berfungsi untuk Angular (v6), tetapi tidak untuk AngularJS. Untuk memperbaikinya, edit pengaturan berikut di file “angular.json” Anda:

/*This is the old situation*/
"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "serviceWorker": true
  }
}

/*And this is the new situation*/
"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": false, //Updated, remove this comment if you copy/paste
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": false, //Updated, remove if copy/paste
    "serviceWorker": true
  }
}

Menyertakan AngularJS di aplikasi Angular Anda

Kamu hampir selesai! Langkah terakhir adalah memasukkan aplikasi AngularJS Anda ke dalam aplikasi Angular Anda yang baru dan berkilau. Anda dapat melakukan ini dengan mengikuti “Bootstrap the hybrid” untuk panduan yang telah saya tunjukkan sebelumnya: “Buat hybrid”. Jika Anda ingin dapat menggunakan komponen Angular baru di aplikasi AngularJS Anda, ikuti langkah-langkah berikut: Peningkatan Angular. Panduan ini juga akan menunjukkan kepada Anda bagaimana Anda dapat menggunakan komponen AngularJS di Angular, namun saya akan merekomendasikan untuk mencoba memutakhirkan sebanyak mungkin komponen ini ke Angular (v6) seiring berjalannya waktu. Bagaimanapun, mereka harus ditingkatkan pada suatu saat, jadi ini adalah kesempatan sempurna untuk itu!

Sekarang Anda akhirnya dapat membuat aplikasi untuk tujuan produksi! Setelah Anda sepenuhnya mengonversi semuanya ke Angular (v6), Anda akan dapat menggunakan AOT dan pengoptimal Build lagi, menjadikan aplikasi Anda lebih efisien. Bisa jadi saya melakukan kesalahan dalam proses saya sendiri dan itulah sebabnya AOT saat ini tidak berfungsi, namun hal ini perlu menunggu revisi.

Catatan

Panduan ini tidak akan berfungsi untuk semua orang, saya pribadi telah menggunakan 3 atau 4 panduan berbeda dan bahkan lebih banyak pencarian Google untuk sampai ke tempat yang tepat. Peningkatan ini bukanlah hal termudah yang pernah Anda lakukan, namun akan sangat bermanfaat. Ini akan banyak meningkatkan stabilitas dan keandalan aplikasi Anda. Ini juga akan menyelesaikan masalah SEO apa pun yang mungkin Anda alami dengan AngularJS karena Angular sebenarnya dapat merender di server (node)!

Jika Anda memiliki pertanyaan, atau lebih baik lagi, saran tentang bagaimana saya dapat membuat proses ini lebih mudah bagi Anda dan saya, silakan tinggalkan komentar. Saya ingin membantu Anda atau belajar dari pengalaman Anda melakukan peningkatan yang luar biasa ini! Jika Anda ingin membaca lebih lanjut tentang perjuangan saya dengan Angular dan SEO, lihat: Cara mengindeks aplikasi satu halaman yang dibangun di AngularJS.

AngularJS + Angular (v6) hybrid (akhirnya!)