Angular 10 – สิ่งที่คุณต้องรู้เกี่ยวกับมัน

Angular เพิ่งเปิดตัวเวอร์ชันใหม่เมื่อวันที่ 24 มิถุนายน 2020 โดยเปิดตัวหลังจาก Angular เวอร์ชัน 9.0 ออกวางจำหน่าย 4 เดือน Angular 10 ล่าสุดเป็นรุ่นเบต้า ซึ่งหมายความว่าทีม Angular ใกล้จะวางจำหน่ายเวอร์ชันล่าสุดของเฟรมเวิร์กที่เน้นการพิมพ์สคริปต์ที่ Google พัฒนาขึ้น

หากคุณเป็นนักพัฒนาเว็บหรือผู้ที่ต้องการพัฒนาเว็บแอปสำหรับธุรกิจของคุณ คุณต้องรู้ว่าเวอร์ชันใหม่นี้มีอะไรให้บ้าง เนื่องจากเวอร์ชันเบต้าเปิดตัวภายใน 4 เดือนหลังจากปล่อยเวอร์ชันล่าสุด คุณอาจสงสัยว่าจะฮิตหรือพลาด! เราอยู่ที่นี่เพื่อช่วยคุณค้นหาคำตอบ มาดูคุณสมบัติหลักของ Angular 10 กันดีกว่า

คุณสมบัติของ Angular 10

แม้ว่าทีม Angular จะยืนยันว่าเวอร์ชันล่าสุดจะเน้นที่เครื่องมือและระบบนิเวศที่มีคุณภาพเป็นหลัก แทนที่จะแนะนำคุณลักษณะใหม่ๆ มากมาย เราได้ทำการศึกษาอย่างละเอียดถี่ถ้วนและนำเสนอรายการข้อเสนอด้านคุณค่าที่ครอบคลุมซึ่งคุณสามารถคาดหวังได้จากเวอร์ชันนี้ . ลองตรวจสอบออกแล้ว

• เครื่องมือเลือกช่วงวันที่ใหม่

ไลบรารีคอมโพเนนต์ UI ของวัสดุเชิงมุมติดตั้งตัวเลือกช่วงวันที่ใหม่แล้ว ไม่แน่ใจว่ามันคืออะไร? สามารถแนบตัวเลือกช่วงวันที่กับหน้าเว็บได้ ปฏิทินจะปรากฏขึ้นเพื่อเลือกเวลา วันที่ หรือช่วงเวลาที่กำหนดไว้ล่วงหน้า เช่น "20 วันที่ผ่านมา"

หากคุณต้องการให้ผู้ใช้เลือกช่วงวันที่แทนที่จะเป็นเพียงวันที่เดียว คุณสามารถใช้องค์ประกอบ mat-date-range-picker และ mat-date-range-input

• การตั้งค่าที่เข้มงวดยิ่งขึ้น

Angular 10 มีการตั้งค่าโครงการที่เข้มงวดมากขึ้นในขณะที่สร้างพื้นที่ทำงานใหม่ด้วย ng new เมื่อคุณเปิดใช้งานการตั้งค่าสถานะนี้ มันจะแนะนำการตั้งค่าใหม่สองสามอย่างในโครงการของคุณ เช่น การปรับปรุงความสามารถในการบำรุงรักษา ทำให้ CLI ทำการเพิ่มประสิทธิภาพขั้นสูงในแอปพลิเคชันของคุณ ช่วยตรวจจับจุดบกพร่องล่วงหน้า เป็นต้น

นี่คือขอบเขตการทำงานพื้นฐานของแฟล็กที่เข้มงวด:

- เปลี่ยนการตรวจสอบประเภทเทมเพลตเป็น Strict
- เปิดใช้งานเข้มงวดมากขึ้นใน TypeScript
- กำหนดค่ากฎผ้าสำลีเพื่อป้องกันการใช้ "ใดๆ" เป็นการประกาศประเภท
- ลดงบประมาณบันเดิลเริ่มต้น

• คำเตือนเกี่ยวกับการนำเข้า CommonJS

การใช้การพึ่งพาที่อัดแน่นด้วย CommonJS ทำให้บันเดิลมีขนาดใหญ่และทำให้แอปพลิเคชันช้าลง Angular 10 เตือนนักพัฒนาเมื่อบิลด์ดึงหนึ่งในบันเดิลดังกล่าว ด้วยวิธีนี้ พวกเขาสามารถแจ้งให้ผู้อ้างอิงรู้ว่าพวกเขาต้องการบันเดิลโมดูล ECMAScript (ESM)

• อัพเดท

มีการอัปเดตที่สำคัญสองสามรายการในการอ้างอิงของ Angular เพื่อซิงโครไนซ์กับระบบนิเวศ JavaScript เหล่านี้มีดังนี้:

-TypeScript ได้รับการอัพเดตเป็น TypeScript 3.9 ช่วยให้ทีมทำงานเพื่อปรับปรุงประสิทธิภาพและความเสถียร
-TSLint ได้รับการอัพเดตเป็น v6
-TSLib ได้รับการอัพเดตเป็น v2.0

เค้าโครงโครงการได้รับการปรับปรุงด้วย ดังนั้น คุณจึงสามารถเห็นไฟล์ tsconfig.base.json ใหม่ใน Angular 10 ได้ ไฟล์นี้รองรับ IDE, ประเภทการแก้ไขเครื่องมือสร้าง และการกำหนดค่าแพ็คเกจได้ดียิ่งขึ้น

นอกเหนือจากนี้ เวอร์ชันล่าสุดของ Angular ยังช่วยให้สิ่งต่างๆ เช่น การเร่งคอมไพเลอร์ ประสบการณ์ในการแก้ไข การแก้ไขทันที และการเสร็จสิ้น

• ปรับปรุงประสิทธิภาพ ngcc

ฟีเจอร์ Angular 10 นี้ส่งเสริมการใช้งานตัวค้นหาจุดเข้าใช้งานตามโปรแกรม การดำเนินการนี้สามารถประมวลผลจุดเริ่มต้นที่มีเฉพาะโปรแกรมที่กำหนดไฟล์ tsconfig.json เท่านั้นที่สามารถเข้าถึงได้ นอกจากนี้ การพึ่งพาจะถูกซ่อนอยู่ภายในการจัดแสดงจุดเข้าใช้งาน และสามารถอ่านได้โดยไม่ต้องคำนวณทุกครั้ง

เส้นทางพื้นฐานของแต่ละแพ็คเกจพร้อมกับจุดเข้าใช้งานไม่จำเป็นต้องเก็บไว้ในไฟล์ ดังนั้นแอปพลิเคชันจึงไม่จำเป็นต้องเก็บอาร์เรย์ที่ว่างเปล่าที่ไม่จำเป็น คุณลักษณะนี้ช่วยในการแสดงรายการและลดขนาดไฟล์ที่จุดเริ่มต้น แม้สำหรับโมดูลโหนดขนาดใหญ่ สิ่งนี้ช่วยเพิ่มประสิทธิภาพได้อย่างมาก

• การรวมหลายไฟล์

เวอร์ชันล่าสุดของ Angular รองรับการรวมเอกสารการแปลหลายฉบับโดยไม่ยุ่งยาก ในเวอร์ชันก่อนหน้า ไฟล์เหล่านี้สามารถโหลดได้เพียงไฟล์เดียวเท่านั้น ขณะนี้ผู้ใช้สามารถระบุเอกสารได้หลายฉบับต่อหนึ่งสถานที่ และธุรกรรมจากไฟล์ทั้งหมดสามารถผสานด้วย ID ข้อความ เอกสารที่สำคัญที่สุดจะถูกวางไว้ก่อนและจะมีการแปลสำรองในภายหลัง

• Async Locking Timeout

อีกสิ่งที่น่าสนใจเกี่ยวกับ Angular 10 ก็คือการหมดเวลาการล็อกแบบ Async ได้รับการกำหนดค่าในเวอร์ชันนี้ สิ่งนี้รองรับไฟล์ ngcc.config.js เพื่อปรับการหน่วงเวลาลองใหม่ & การลองใหม่ใน AsyncLocker การทดสอบการรวมช่วยให้นักพัฒนาสามารถตรวจสอบการหมดเวลา ใช้ไฟล์ ngcc.config.js เพื่อลดช่วงหมดเวลาและป้องกันไม่ให้การทดสอบใช้เวลานาน ไม่น่าแปลกใจเลยที่มืออาชีพของบริษัทพัฒนาเว็บแอปพลิเคชันยินดีรับ Angular เวอร์ชันล่าสุดด้วยความโล่งใจอย่างมาก!

• เราเตอร์

ตัวป้องกัน CanLoad สามารถกลับไปที่ UrlTree ในเวอร์ชันล่าสุดของ Angular ตัวป้องกัน CanLoad ที่ส่งคืน UrlTree จะทำให้การนำทางที่ล้ำสมัยเป็นโมฆะ และในทางกลับกันก็ช่วยเปลี่ยนเส้นทาง ซึ่งตรงกับพฤติกรรมปัจจุบันกับ CanActivate Guards ที่มีอยู่ – สิ่งเหล่านี้ถูกเพิ่มไว้ที่นี่ด้วย อย่างไรก็ตาม สิ่งนี้ไม่มีผลกระทบต่อการโหลดล่วงหน้า

• รวบรวม

Ahead-of-Time (AOT) รวบรวมแอพและไลบรารี ณ เวลาสร้าง นี่เป็นวิธีปฏิบัติทั่วไปตั้งแต่ Angular 9 มันสามารถแปลงรหัสระหว่างเวลาสร้าง แม้กระทั่งก่อนที่เบราว์เซอร์จะดาวน์โหลดและเรียกใช้รหัสนั้นในภายหลัง โดยธรรมชาติแล้ว วิธีนี้ช่วยให้การแสดงผลในเบราว์เซอร์เร็วขึ้น คอมไพเลอร์กำจัดคำขอ AJAX แยกต่างหากสำหรับไฟล์ต้นทางโดยใส่เทมเพลต HTML ภายนอกและสไตล์ชีต CSS ภายใน JavaScript ของแอปพลิเคชัน

มีการเปลี่ยนแปลงที่ชัดเจนใน AOT ใน Angular 10:

1. การรวบรวมที่เพิ่มขึ้นช่วยให้มีเวลาในการสร้างดีขึ้น
2. ด้วยรหัสที่สร้างขึ้นเข้ากันได้กับการสั่นของต้นไม้ จึงสามารถบรรลุขนาดการสร้างที่ดีขึ้น
3. เวอร์ชันนี้ช่วยให้คุณสำรวจคุณลักษณะใหม่ๆ ได้หลายอย่าง เช่น การโหลดคอมโพเนนต์แบบ Lazy Loading แทนโมดูล Metaprogramming หรือส่วนประกอบที่มีลำดับสูงกว่า ระบบตรวจจับการเปลี่ยนแปลงล่าสุดที่ไม่อิงตาม Zone.js เป็นต้น

• แก้ไขข้อผิดพลาด

ในเวอร์ชันนี้ มีการแก้ไขข้อผิดพลาดหลายอย่าง ซึ่งรวมถึงการลบอินสแตนซ์ที่ไม่ได้ระบุของช่วงในคอมไพเลอร์ การแก้ไขข้อผิดพลาดที่เกี่ยวข้องกับการย้ายข้อมูลขณะนำเข้าสัญลักษณ์ที่ไม่มีอยู่ การระบุโมดูลที่ได้รับผลกระทบจากการแทนที่ใน TestBed และอื่นๆ นอกจากนี้ยังมีวิธีแก้ปัญหาในแกนกลางสำหรับแก้ไขข้อผิดพลาด Terser Inlining

• การมีส่วนร่วมของชุมชนที่ดีขึ้น

Angular มีชุมชนนักพัฒนาระดับโลกขนาดใหญ่ที่มอบข้อเสนอที่คุ้มค่าสำหรับโครงการ Angular อย่างต่อเนื่องตลอดช่วงคลื่นความถี่ทั้งหมด เมื่อเร็วๆ นี้ องค์กรเองก็กำลังวางแผนที่จะนำกลยุทธ์มาใช้และลงทุนเพื่อเพิ่มพลังให้กับชุมชนและทำให้แพลตฟอร์มดียิ่งขึ้นไปอีก

• การเลิกใช้งานและการนำออก

รูปแบบแพ็คเกจเชิงมุมไม่รวมกลุ่ม FESM5 หรือ ESM5 อีกต่อไป ซึ่งช่วยให้คุณประหยัดเวลาในการดาวน์โหลดและการติดตั้ง 119MB ขณะรัน yarn หรือ npm install ในไลบรารีและแพ็คเกจของ Angular รูปแบบเหล่านี้สามารถยกเลิกได้เนื่องจากการปรับระดับลงเพื่อช่วยเหลือ ES5 จะดำเนินการเมื่อสิ้นสุดกระบวนการพัฒนา

นอกจากนี้ องค์กรเชิงมุมได้เลิกสนับสนุนเบราว์เซอร์รุ่นเก่าๆ เช่น IE9, 10 และ Internet Explorer Mobile

• การเปลี่ยนแปลงอื่นๆ

Angular 10 นำเสนอการเปลี่ยนแปลงที่ก้าวล้ำ ตัวอย่างเช่น ลอจิกได้รับการอัปเดตตามช่วงเวลาของการจัดรูปแบบที่ขยายเกินเที่ยงคืน หากแอปพลิเคชันของคุณใช้ formatDate หรือ DatePipe หรือแม้แต่รหัสรูปแบบ b และ B จะได้รับผลกระทบจากการเปลี่ยนแปลงนี้

การเปลี่ยนแปลงอีกประการหนึ่งคือตัวแก้ไขใดๆ ที่ส่งคืน EMPTY จะยกเลิกการนำทาง นักพัฒนาต้องอัปเดตตัวแก้ไขด้วยค่าเฉพาะบางอย่างเช่น default!Empty

Angular NPM ไม่มีความคิดเห็น jsdoc เล็กน้อยเพื่อรองรับการเพิ่มประสิทธิภาพขั้นสูงของ Closure Compiler ผู้ที่ใช้ Closure Compiler ควรใช้แพ็คเกจ Angular ที่สร้างขึ้นโดยตรงจากแหล่งที่มาแทนที่จะใช้เวอร์ชันที่เผยแพร่บน NPM ผู้ใช้สามารถใช้ไปป์ไลน์การสร้างปัจจุบันชั่วคราวได้

ในเวอร์ชันนี้ ส่วนหัว Vary จะถูกมองข้ามไปในระหว่างการดึงแหล่งที่มาจากแคชของ ServiceWorker ส่งผลให้สามารถดึงแหล่งที่มาได้แม้ว่าส่วนหัวจะไม่เหมือนกัน หากแอปพลิเคชันต้องแยกการตอบสนองตามส่วนหัวของคำขอ ตรวจสอบให้แน่ใจว่าได้กำหนดค่า Angular ServiceWorker เพื่อหลีกเลี่ยงแคชของทรัพยากรที่ได้รับผลกระทบ

คำเตือนเกี่ยวกับองค์ประกอบที่ไม่รู้จักจะถูกบันทึกว่าเป็นข้อผิดพลาด การดำเนินการนี้จะไม่ทำให้แอปของคุณเสียหาย แต่สามารถเรียกใช้เครื่องมือที่คาดว่าจะเข้าสู่ระบบผ่าน console.error ได้

วิธีอัปเดตเป็น Angular 10

หากต้องการอัปเกรดเป็นเวอร์ชันล่าสุดของ Angular คุณสามารถใช้คำสั่งต่อไปนี้:

ng อัปเดต @angular/cli @angular/core

ต่อไปนี้คือแนวทางขั้นสุดท้ายในการอัปเดตเป็น Angular เวอร์ชัน 10 อย่างไรก็ตาม หากไม่มีความเชี่ยวชาญด้านเทคนิค คำสั่งอาจไม่มีประโยชน์ใดๆ ใช้บริการการพัฒนา Angular แบบมืออาชีพเพื่ออัปเดตเป็น Angular 10 ได้สำเร็จ

บทสรุป
ความสะดวกทั้งหมดที่นำเสนอโดย Angular 10 อาจชักจูงให้คุณอัปเกรดเวอร์ชันเฟรมเวิร์กของแอป เชื่อเราเถอะ มันคุ้มค่ากับความพยายาม