ใช้ Jest ใน Angular แบบง่ายกว่าเดิม ด้วย jest-schematic

ในบันทึกก่อนหน้าโน้น เคยจดเอาไว้เรื่องเกี่ยวกับวิธีการใช้ Jest ใน Angular จะเห็นว่ามีขั้นตอนมากมายว่าจะใช้ jest ได้

Multilingual ใน Angular อีกที

ได้มีโอกาสมาลองเรื่องการทำ multilingual application บน angular อีกที ก็เจอว่า ของเก่าที่เคยทำไว้ มันทำไว้ตั้งแต่ angular 5 เลยเอามาลองปัดฝุ่นดูอีกที

ใช้ Sass ใน Angular

โดยปกติโปรเจคที่สร้างขึ้นด้วย angular cli มันจะใช้ css เป็น default format สำหรับการกำหนด stylesheet ของโปรเจค ซึ่งถ้าเราอยากจะใช้เป็นอย่างอื่น เราก็สามารถกำหนดได้ตั้งแต่ตอนสั่ง ng new ว่าจะเอาตัวไหน จนกระทั่ง angular 7 ออกมา ตัว cli จะถามว่าเราอยากได้ format ไหนสำหรับทำ stylesheet และเราก็สามารถเลือกได้เลยว่าจะใช้ตัวไหนระหว่าง CSS, SASS, SCSS, LESS, Stylus

Migrate jasmine ไปใช้ jest ใน Angular 6

อะกิมาบอกว่า jest น่าสนใจดีนะ จำได้ว่ามีคนเคยชวนไปใช้ jest แต่ตอนนั้นก็ยังไม่ได้สนใจอะไร ตอนนี้พอมีเวลาก็เลยมาลองซะหน่อย มี project ทดสอบอยู่ตัวนึงที่เอาไว้ใช้สอน robot คือ ng-calculator ซึ่งเดิมใช้ jasmine อยู่ เดี๋ยวจะมาลองเปลี่ยนเป็น jest ดู

โชว์ Code Coverage ของ Angular Project ใน Github

เข้าไปเห็น repo ใน github ของหลาย ๆ คน เขาแสดง code coverage เป็น badge แล้วมันดูเท่ไม่หยอก ที่สำคัญมันออโต้ด้วย ไม่ต้องมานั่งพิมพ์เองหลังจาก run unit test เสร็จว่า code coverage เราเท่านี้แล้วนะ ให้มันอัพเดทโดยอัตโนมัติดีกว่า จิ้ม ๆ ดูเห็นเขาใช้ service ของ codecov.io เลยไปลองมั่งดีกว่า จริง ๆ วิธีนี้ใช้กับ provider เจ้าอื่นได้ด้วย ไม่ใช่แค่ github พวก bitbucket, gitlab ก็ได้นะ

เพิ่ม Environment Variables ใหม่ใน Angular

ใน Angular โดยปกติจะมี environment มาให้ 2 environment คือ prod กับ ไม่ prod (เรียกรวม ๆ ว่า dev ละกัน) โดย environment ของ prod จะอยู่ที่ /src/environments/environment.prod.ts ส่วนอันที่เป็น dev จะอยู่ที่ /src/environments/environment.ts ซึ่งปกติเวลาเราสั่งคำสั่งผ่าน angular cli เช่น ng serve หรือ ng build มันจะเอาอันที่เป็น dev มาใช้ ถ้าต้องการใช้อันที่เป็น prod ต้องมีการประกาศอย่างชัด ๆ ว่าฉันจะเอา production นะ ผ่าน option –prod หรือ –environment=prod เช่น ng serve –environment=prod

Access Control ด้วย Route Guard ใน Angular

ใน App ทั่ว ๆ ไปที่ต้องมีการ login ก่อนการใช้งาน บาง route ก็จะเป็น route ที่ใครก็สามารถเข้าไปใช้งานได้ แต่บาง route อาจจะไม่ ในกรณีที่เราอยากให้บาง route ที่เรากำหนดขึ้นมาสามารถเข้าถึงได้ด้วย user แค่บางกลุ่ม เช่น admin หรือเฉพาะเจ้าของ route นั้น เราสามารถทำได้ด้วยการใช้ Route Guard

สร้าง Angular Library ไปวางไว้บน npm

เคยคิดว่า ถ้าจะสร้าง component สำหรับ Angular แล้วเอาไปให้คนอื่นได้ใช้ผ่าน npm มันต้องทำยังไง แต่สุดท้ายก็ลืมหาคำตอบ จนมาเกิดคำถามนี้อีกครั้งตอนมา outing ของ odd.Works ที่ตั้มถามว่า ถ้าจะทำ component ไปวางไว้บน npm เนี่ย มันต้องทำยังไง เลยเกิดคำถามว่า เออ มันทำไงวะ เคยได้แต่ถาม ไม่เคยหาคำตอบ งั้น มาลองดิ๊

Multilingual ใน Angular

ลองหาวิธีทำ multilingual application ใน angular แล้วเจอตัวที่เป็น translation service ที่มีหน้าตาคล้าย ๆ กับที่เคยทำใน AngularJS ต้องใช้พวก translation provider อะไรพวกนี้ หาไปเรื่อย ๆ ก็เจอ @ngx-translate ที่ดูเจ๋ง แต่ตอนเอาไปใช้นี่น่าจะใช้เวลานานเหมือนกัน เลยลองทำเล่นดูเองดีกว่า