Update จาก angular 6 ไป 14

Photo by Pawel Czerwinski on Unsplash

ช่วงที่ผ่านมาผมอัพเกรด Angular application จาก version 6 ไปเป็น 14 ซึ่งผมก็ได้เปิดหูเปิดตามากมาย จึงอยากเอาสิ่งที่ได้เรียนรู้มาแบ่งปัน เผื่อจะเป็นประโยชน์กับคนอื่น

Angular มีเว็บไซต์ที่คอยแนะแนวทางในการอัพเกรดแต่ละเวอร์ชั่น

ref: https://update.angular.io/?l=3&v=6.0-14.0

ซึ่งผมก็ค่อย ๆ ทำตามโดนอัพเกรดไปทีละเวอร์ชั่น เช่น จาก 6 ไป 7 และจาก 7 ไป 8 เป็นต้น

Unit test พัง

ช่วงแถว ๆ angular version 8, 9 ผมพบว่าผมต้องถอยไปใช้ node เวอร์ชั่น 14 เพื่อจะได้ run unit tests ได้ พออัพเกรดเป็น node 15 ขึ้นไปปุ๊บ (ปัจจุบัน node ล่าสุดคือ version 18) ปรากฏว่า unit test unit test run ไม่ได้เลย เจอ error ดังภาพด้านล่าง (ซึ่งทั้งหมดนี้หายเองตอน อัพเกรดเป็น angular version 14 สำเร็จ)

unit test errors on node version 15+

จากการ debug ดู ผมเจอว่า root cause คือ request ที่เกิดการการเรียก font ไม่ถูกมองเป็น assets แต่มองเป็น XHR request ซึ่งทำให้มัน resolve ไม่สำเร็จแล้วเกิด error ขึ้น ผมแก้โดยการเติมโค้ดด้านล่างใน file /node_modules/webpack-dev-middleware/lib/util.js เพื่อให้ test run ผ่านไปก่อน ผมจะได้ยังได้ feedback ว่ามีอะไรพังไปเพราะการ upgrade ไหม

code ที่ผมแก้ใน /node_modules/webpack-dev-middleware/lib/util.js เพื่อให้ test run ผ่านไปก่อน

ต้องหา python 2.7 กลับมาลง

ผมพบอีกว่าตอน install core-js เวอร์ชั่นเก่า มัน require pyhton 2.7 ซึ่ง obsolete ไปแล้ว ผมเลยตัดสินใจลง pyenv เพื่อสลับไปมาระหว่าง version python เพราะงานอื่นผมใช้ python 3 หมดแล้ว

อีก 2 คำสั่งที่ผมพบว่ามีประโยชน์มากตอน upgrade ของคือ คำสั่ง npm ls กับ npm outdated

npm ls

npm ls เป็นคำสั่งที่ใช้ดู version ของ npm library ที่เรา install อยู่ ซึ่งผมใช้คำสั่งนี้ 2 กรณีคือ 1. ดูว่าตอนนี้ลง library version อะไรอยู่ เช่นจะดูของ @angular/common ก็พิมพ์ว่า npm ls @angular/common

npm ls @angular/common

กรณีที่สองคือจะตรวจดูว่าตอนนี้มี error อะไร ของ library ต่าง ๆ ไหม เพราะบ่อยครั้งตอน upgrade ผมลง force install library เพราะ version ต่าง ๆ มันผูกกันอีกรุงตุงนังไปหมดจนไม่สามารถ install ตามปรกติได้ เลยต้อง force install บาง library ไปก่อน แล้วค่อยมาดูว่าต้องตาม update อันไหนตามบ้างเพื่อซ่อม error ตามหลัง

errors ของ library ต่าง ๆ ท้าย npm ls

npm outdated

Captured by Chokchai Phatharamalai

คำสั่งนี้ใช้ดูว่ามี library ไหนบ้างที่เก่า พร้อมกับแสดงให้ดูว่าล่าสุดอยู่ที่ version ไหน ซึ่งพอผมเห็นว่า library ไหน outdated ผมก็จะไปดูว่า version ที่ compatible กับ angular version ที่ผมอยู่คือ version อะไร เช่น ของ @ng-bootstrap ด้านล่าง

ref: https://www.npmjs.com/package/@ng-bootstrap/ng-bootstrap

สรุปการเรียนรู้

การอัพเดทครั้งนี้ย้ำเตือนอีกครั้งว่าให้หลีกเลี่ยงการ mock ใน unit test เท่าที่จะทำได้ เพราะเวลาอัพเกรด library ไอ้ mock เหล่านี้แหละที่จะพัง ลูกค้าไม่ได้จ้างผมมาเขียนเทส แต่จ้างผมมาเขียนโค้ด ถ้าเป็นไปได้ เอาเวลาเขียน mock ไป refactor โค้ดให้ loose coupling จะได้เขียนเทสได้โดยไม่ต้อง mock ดีกว่า

บาง library ไม่ support node version เลขคี่ เค้า support แต่เลขคู่ที่เป็น LTS (Long Term Support)

อ้างอิง

Angular Update Guide

@ng-bootstrap/ng-bootstrap