Standalone components คืออะไร?

Question

Accepted Answer

**Standalone components** (Angular 14+ ซึ่งเป็นค่าเริ่มต้นในเวอร์ชันใหม่ ๆ) ช่วยให้ component สามารถประกาศ **dependency ของตัวเองได้โดยตรง** โดยไม่ต้องสังกัดอยู่ใน `NgModule` มันลด boilerplate ลงอย่างมากและเป็นวิธีที่แนะนำในการสร้างแอป Angular ในปัจจุบัน ## standalone component ```ts import { Component } from "@angular/core"; import { CommonModule } from "@angular/common"; import { RouterLink } from "@angular/router"; @Component({ selector: "app-user-list", standalone: true, // ← no NgModule needed imports: [CommonModule, RouterLink], // ← declare dependencies HERE, on the component template: ` {{ u.name }} `, }) export class UserListComponent { users = []; } ``` Component จะ import เฉพาะสิ่งที่ template ของมันใช้จริง (`CommonModule` สำหรับ `*ngFor`, `RouterLink` สำหรับลิงก์) ดังนั้น dependency ของมันจึงชัดเจนและอยู่รวมในที่เดียวกัน แทนที่จะถูกประกาศใน NgModule แยกต่างหาก ## เปรียบเทียบกับ NgModules ```text NgModule approach: Standalone approach: ────────────────────────────────────────────────────────────── @NgModule({ declarations:[Comp], @Component({ standalone: true, imports:[CommonModule] }) imports:[CommonModule], ... }) → extra file, indirection → everything in one place ``` ## การ bootstrap แอปแบบ standalone (ไม่มี AppModule) ```ts import { bootstrapApplication } from "@angular/platform-browser"; import { provideRouter } from "@angular/router"; import { provideHttpClient } from "@angular/common/http"; bootstrapApplication(AppComponent, { providers: [ provideRouter(routes), // configure router functionally provideHttpClient(), // HttpClient without HttpClientModule ], }); ``` แอปแบบ standalone จะแทนที่ `AppModule` ระดับ root ด้วย `bootstrapApplication` และฟังก์ชัน **`provideX`** ซึ่งเป็นการกำหนดค่าแบบอิงฟังก์ชันที่สะอาดกว่า ## ประโยชน์ ```text ✓ Less boilerplate — no NgModule files to maintain ✓ Explicit dependencies — see exactly what a component uses ✓ Easier lazy loading — loadComponent() directly ✓ Simpler mental model — components are self-contained units ✓ Better tree-shaking potential ``` ## ทำไมจึงสำคัญ Standalone components คือ **ทิศทางสมัยใหม่ของ Angular** โดยปัจจุบัน framework จะสร้างโครงเป็นแบบ standalone ตามค่าเริ่มต้นและจัดเตรียมฟังก์ชัน `provideX` ไว้เพื่อกำหนดค่าฟีเจอร์ต่าง ๆ โดยไม่ต้องใช้ module มันขจัดภาระของ NgModule ที่มีมายาวนาน ทำให้ dependency ชัดเจนและอยู่ในระดับ local อีกทั้งยังทำให้การ lazy loading และ mental model โดยรวมง่ายขึ้น การเข้าใจ standalone (และการตั้งค่า `bootstrapApplication`/`provideRouter`/`provideHttpClient`) เป็นสิ่งจำเป็นสำหรับการทำงานกับ Angular ในปัจจุบัน ขณะที่ความรู้เรื่อง NgModule ยังคงจำเป็นสำหรับโค้ดเก่า