Category: Angular

.
2. เปลี่ยนวิธีเขียน lazy-loading แบบใหม่ (Routing) เพื่อรองรับการใช้งาน Ivy จะแก้โค้ดเองก็ได้ครับ แต่แนะนำให้ใช้คำสั่งอัปเดตจะดีกว่า (ดูข้อ 10) เพราะว่าตัว Angular CLI จะอัปเดตโค้ดส่วนนี้ให้อัตโนมัติเลย

เดิม

{ path: ‘admin’, loadChildren: ‘./admin/admin.module#AdminModule’ }

แบบใหม่ แก้เป็น

{ path, ‘admin , loadChildren: () => import(‘./admin/admin.module’).then(m => m.AdminModule) }

.
3. Angular CLI 8 เปลี่ยนมาใช้ dart-sass แทน node-sass ทำให้การ build ไฟล์ Sass เร็วขึ้นอีกมาก ๆ

.
4. Angular CLI 8 จะ default build target เป็น es2015 แทน es5 เดิมแล้วนะครับ (ดูได้ที่ไฟล์ tsconfig.json)
ทำให้ต่อไปเวลาสั่ง ng build จะมีไฟล์ build เพิ่มมาอีก 2 เวอร์ชัน ครับ คือ es2015 และ es5 ถ้าโปรเจคเราเปิดด้วย Browsers สมัยใหม่ ก็จะเรียกไฟล์ build ที่่เป็น es2015 ครับ (ตอน runtime) แต่ถ้าเปิดด้วย IE 9-11 ก็จะเปลี่ยนมาใช้ไฟล์ build ที่เป็น es5 แทน (แน่นอนไฟล์ที่ build ด้วย es5 จะมีขนาดใหญ่กว่า es2015 ครับผม)

อีกประเด็นที่สำคัญคือเรื่องของ CSS ถ้าหากใครที่ใช้ IE 9-11 อยู่ ก่อนที่จะ build โปรเจค อย่าลืมไปเปิดใช้งาน autoprefixer ด้วยโดยลบคำว่า not ออกจากบรรทัด not IE 9-11 ที่ไฟล์ browserslist ครับผม

.
5. ใน Angular 8 รองรับการใช้งาน compiler (และ runtime) ตัวใหม่ที่ชื่อว่า Ivy ทำให้ประสิทธิภาพของโปรเจค Angular เราดีขึ้นมาก แนะนำให้ใช้ได้เลยนะครับ
สามารถทำได้ตอนสร้างโปรเจคใหม่ ด้วยคำสั่ง ดังนี้

ng new project –enable-ivy

ถ้าใครอัปเกรดมาจากเวอร์ชันก่อนหน้า ก็ไปตั้งค่าที่ไฟล์ tsconfig.app.json ได้ครับ ในส่วนของ compilerOptions เพิ่มคำสั่งดังนี้

“angularCompilerOptions”: {
“enableIvy”: true
}

*อนาคตตัวนี้จะถูกเปิดโดย default ใน Angular เวอร์ชัน 9 เลย

.
6. เพิ่ม method ชื่อว่า clear() ให้กับ FormArray คือ ไม่ต้อง loop ลบ controls เองเหมือนแต่ก่อน ตัวอย่าง

const products = fb.array([product1, product22]);
products.clear();

.
7. รองรับการเขียน Web Worker ซึ่งเป็นอีกทางที่จะทำให้โปรเจคเราเร็วขึ้นได้ ดูเพิ่มเติมได้ที่ => https://angular.io/guide/web-worker

.
8. จะมีเลิกใช้ @angular/platform-webworker เร็วๆนี้ครับ และเอา package @angular/http ออกเป็นที่เรียบร้อยแล้ว (ใช้ @angular/common/http แทน)

ใครอยากดูว่า Angular จะเอาอะไรออกบ้างในอนาคต ดูได้ตามลิงก์นี้ได้ครับจะเตรียมตัวไว้ => https://angular.io/guide/deprecations

.
9. มี CLI Builders เพิ่มเข้ามาใหม่ เผื่อใครอยาก custom คำสั่ง command line ต่างๆ ดูเพิ่มเติมได้ที่ => https://angular.io/guide/cli-builder

.
10. สำหรับคนที่เรียนคอร์สเรียนออนไลน์ไปแล้ว (ถ้าใช้ Angular เวอร์ชัน 7) สามารถอัปเดตเป็น Angular 8 ได้เลยนะครับ (อย่าลืม backup โปรเจคเดิมด้วยนะ) ด้วยคำสั่ง

ng update @angular/cli @angular/core

รันเลย! ยินดีด้วยโปรเจคของเราอัปเกรดเป็น Angular 8 เรียบร้อย ฮ่าๆ ง่ายมาก

.
ขอบคุณที่ติดตามอ่านครับ
โค้ชเอก

.
2. Ivy Renderer เป็น view renderer ตัวใหม่ ทำให้โปรเจคที่ build มีขนาดเล็กลง และแน่นอนทำให้เร็วมากขึ้น (ตอนนี้ ivy กำลังพัฒนาอยู่ น่าจะตัวจริงมาให้ใช้เร็วๆนี้ แต่ถ้าใครอยากลองทดสอบดูก่อน ก็สามารถเปิดใช้งาน ivy ได้นะครับ)

.
3. เราสามารถสร้าง UI components ของเราเองได้โดยใช้ Component Dev Kit หรือ CDK

.
4. เราสามารถสร้าง Library ของเราเองได้ โดยตัว Angular CLI จะมีคำสั่ง ng generate library <ชื่อ lib> มาให้ครับ
เวลาเรา build เสร็จแล้วจะใช้ในโปรเจคของเราก็ได้ หรือจะ publish ไปให้คนอื่นใช้ก็ได้เช่นเดียวกัน
=> http://bit.ly/2rkgtn2

.
5. Angular CLI เพิ่มคำสั่ง ng update เข้ามาครับทำให้โปรเจคของเราใหม่อยู่เสมอ ดูเพิ่มเติมได้ที่ => http://bit.ly/2HKpC2y

.
6. Angular CLI เพิ่มคำสั่ง ng add ทำให้เราสามารถติดตั้งไลบรารี หรือ package ของ Angular ได้ง่ายขึ้น และลดขั้นตอนการ setup package ต่างๆ พูดง่ายๆ คือ เวลาติดตั้งเสร็จเราก็สามารถใช้งานได้เลยโดยไม่ต้องตั้งค่าให้ยุ่งยาก

ยกตัวอย่างเช่น ถ้าเราอยากใช้ package Bootstrap 4 components ก็รันคำสั่ง ng add @ng-bootstrap/schematics เป็นต้น

.
7. Angular CLI ทำให้โปรเจคของเราเป็น PWA ได้ง่ายขึ้นครับ แทบไม่ต้องตั้งค่าอะไรเลย เพียงใช้คำสั่ง ng add @angular/pwa ก็เรียบร้อย (ตอน build อย่าลืมใส่ –prod ด้วยนะ)

.
8. สำหรับคนที่ใช้ Angular Material จะมี Starter Components มาให้ใช้สำเร็จรูปเลย เช่น ถ้าสั่งรัน ng generate @angular/material:material-nav
ก็จะได้เมนูด้านข้างมาในทันที

.
9. มาพร้อมกับ RxJS ^6.0.0 ครับ

.
สำหรับคนที่่อยากอัปเดต จะใช้คำสั่ง ng update ก็ได้ หรือจะไปดูรายละเอียดการอัปเดตได้ที่เว็บนี้ครับ => https://update.angular.io/

.
อ่านละเอียดต่างๆ อ่านเพิ่มเติมได้ที่นี่ => http://bit.ly/2rkmBuL

.
หากดูกันจริงๆแล้ว ส่วนใหญ่ในเวอร์ชันนี้จะเป็นการเปลี่ยนแปลงภายใน และเครื่องมือต่างๆ ครับ ไม่ได้มีการเปลี่ยนแปลงใหญ่ๆ ในส่วนของการ coding มากนัก