Angular 11 – ทุกสิ่งที่คุณต้องรู้

Angular เวอร์ชัน 11 มาถึงแล้ว และได้นำเสนอการอัปเดตที่ยอดเยี่ยมสำหรับนักพัฒนา ตั้งแต่เฟรมเวิร์กไปจนถึงส่วนประกอบและ CLI ทุกอย่างได้รับการอัปเดต ทีม Angular พยายามนำการเปลี่ยนแปลงที่สำคัญบางอย่างมาสู่การอัปเดตแต่ละครั้ง ตัวอย่างเช่น iVY เปิดตัวใน Angular 9 รองรับ Typescript 3.8 ใน Angular 9.1 และการแก้ไขในไลบรารีส่วนประกอบ Angular Material UI ถูกนำเสนอใน Angular 10 วันนี้ เราจะมาสำรวจคุณสมบัติของ Angular 11 กัน แล้ว.

Angular 11 – คุณสมบัติ & อัปเดต

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

#สายรัดทดสอบส่วนประกอบ

ใน Angular เวอร์ชัน 9 ชุมชนได้แนะนำ Component Test Harnesses สิ่งเหล่านี้ให้พื้นผิว API ที่แข็งแกร่งเพื่อช่วยในการทดสอบส่วนประกอบวัสดุเชิงมุม อนุญาตให้นักพัฒนาโต้ตอบกับส่วนประกอบโดยใช้ API ที่รองรับ

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

#อัปเดตการสนับสนุนการเปลี่ยนโมดูลยอดนิยม

Hot Module Replacement หรือ HMR เป็นกลไกที่ช่วยให้สามารถเปลี่ยนโมดูลได้โดยไม่ต้องรีเฟรชเบราว์เซอร์แบบเต็ม นี่เป็นแนวคิดเก่า แต่ Angular 11 เพิ่มมากขึ้น

Angular 11 ให้การสนับสนุน HMR ด้วยการเปลี่ยนแปลงโค้ดที่จำเป็นและการกำหนดค่า อนุญาตให้ CLI เปิดใช้งาน HMR ในขณะที่เริ่มต้นแอปด้วย ng เสิร์ฟ ต้องใช้คำสั่งต่อไปนี้เพื่อเริ่มต้นใช้งาน:

ng ให้บริการ –hmr

ดังนั้น คำสั่ง CLI จะลดจำนวนความพยายามที่จำเป็นในการกำหนดค่า HMR ลงอย่างมาก เมื่อนักพัฒนาแทรกคำสั่งนี้ คอนโซลจะแสดงข้อความทันทีที่เซิร์ฟเวอร์ภายในเครื่องยืนยันว่า HMR ทำงานอยู่

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

#Updated ตัวอย่างบริการภาษา

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

#การใส่แบบอักษรอัตโนมัติ

Angular 11 นำเสนอการแทรกแบบอักษรอัตโนมัติที่ช่วยแปลงไอคอนและแบบอักษรของ Google เป็นอินไลน์ในดัชนี HTML ในระหว่างการคอมไพล์ Angular CLI จะดาวน์โหลดและฝังฟอนต์อินไลน์ที่เชื่อมโยงและใช้ในแอพพลิเคชั่น สิ่งเหล่านี้ถูกเปิดใช้งานโดยค่าเริ่มต้นสำหรับการกำหนดค่า

นี่เป็นค่าเริ่มต้นในแอปพลิเคชันที่สร้างด้วยเวอร์ชัน 11 ดังนั้น เพื่อใช้ประโยชน์จากการเพิ่มประสิทธิภาพนี้ นักพัฒนาต้องอัปเดตแอปก่อน

#Webpack 5 รองรับ

Webpack ใช้สำหรับรวบรวมไฟล์จำนวนมากเป็นไฟล์หรือบันเดิลขนาดเล็กไฟล์เดียว เวอร์ชันล่าสุด - Webpack 5 เปิดตัวเมื่อไม่กี่เดือนก่อน

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

นี่คือคำสั่งสำหรับการใช้ webpack 5 เพิ่มบรรทัดต่อไปนี้ในไฟล์ package.json:

“ความละเอียด”: {
“เว็บแพ็ค”: “5.4.0”
}

#เปลี่ยนไปใช้ ESLint

TSLint เป็นหนึ่งในเครื่องมือแสดงรายการยอดนิยมที่ใช้และแนะนำโดยผู้ให้บริการด้านการพัฒนาเชิงมุม เมื่อเร็ว ๆ นี้ หน้าที่ถูกส่งไปยัง ESLint

ด้วย Angular 11 ทำให้ Codelyzer และ TSLint ถูกเลิกใช้อย่างเป็นทางการ และจะถูกลบออกในเวอร์ชันต่อๆ ไป เวอร์ชันล่าสุดได้แนะนำวิธีการ 3 ขั้นตอนสำหรับการย้ายจาก TSLint ไปยัง ESLint:

ขั้นตอนที่ 1 – เรียกใช้ ng add @angular-eslint/schematics
ขั้นตอนที่ 2 – ตอนนี้ เรียกใช้คำสั่ง ng g @angular/schematics:convert-tslint-to-eslint {{YOUR PROJECT NAME}}
ขั้นตอนที่ 3 – ลบ tslint.json ระดับรูท

#สร้างเร็ว

Angular 11 นำเสนอการปรับปรุงความเร็วที่รุนแรง กระบวนการอัปเดต NGCC เร็วขึ้นกว่าเดิม 2-4 เท่า ดังนั้น นักพัฒนาจึงไม่ต้องรอนานสำหรับการสร้างและสร้างใหม่ให้เสร็จ

#รองรับ TypeScript 4.0

Angular 11 รองรับ TypeScript 4.0 การสนับสนุนสำหรับ TypeScript 3.9 ได้ถูกยกเลิกแล้ว สาเหตุหลักประการหนึ่งเบื้องหลังนี้คือการเพิ่มความเร็วของงานสร้าง เวอร์ชันล่าสุดช่วยให้สร้างได้เร็วและราบรื่นกว่าเวอร์ชันก่อนหน้า

#การบันทึกและการรายงานที่ดีขึ้น

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

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

นอกเหนือจากที่กล่าวไว้ข้างต้นแล้ว เวอร์ชันล่าสุดของ Angular ยังนำเสนอการเปลี่ยนแปลงอื่นๆ อีกหลายประการ เช่น:

• การปรับปรุงพนักงานบริการ
• แผนผังอัตโนมัติและการย้ายข้อมูลใหม่
• รองรับการโหลดแบบขี้เกียจสำหรับร้านที่มีชื่อต่างๆ
• การสนับสนุนสำหรับ Internet Explorer 9,10 และการสนับสนุนอุปกรณ์เคลื่อนที่ IE จะถูกลบออกทั้งหมด
• saveQueryParams จะถูกลบออกในเราเตอร์ นักพัฒนาสามารถใช้ queryParamsHandling=”preserve” แทน
• ตอนนี้ประเภทที่เข้มงวดยิ่งขึ้นถูกสร้างขึ้นในท่อ
• CLI เชิงมุมสามารถสร้างตัวป้องกันการแก้ไขได้
• ฟังก์ชัน formatDate รองรับการจัดรูปแบบปีที่มีเลขสัปดาห์ ISO 8601
• นิพจน์ภายใน ICUs ได้รับการตรวจสอบประเภทอีกครั้ง
• ไปป์ async ไม่ส่งคืน undefined สำหรับอินพุตใดๆ ที่พิมพ์ว่าไม่ได้กำหนดอีกต่อไป

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

คุณสามารถจ้างนักพัฒนา Angular เพื่ออัปเดตแอปพลิเคชันของคุณเป็น Angular 11 นักพัฒนาจำเป็นต้องเรียกใช้คำสั่งต่อไปนี้:

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

พบบทความที่มีประโยชน์? แบ่งปันกับคนรู้จักของคุณและให้พวกเขารู้ทุกอย่างเกี่ยวกับ Angular 11