Angular Standalone Components คืออะไร และทำไมถึงเป็นอนาคตของ Angular

Standalone Components คืออะไร

ตั้งแต่ Angular 14 เป็นต้นมา Angular แนะนำ Standalone Components ซึ่งเป็นวิธีสร้าง component โดยไม่ต้องพึ่ง NgModule อีกต่อไป ทำให้โค้ดกระชับและเข้าใจง่ายขึ้นมาก

ปัญหาของ NgModule เดิม

ก่อนหน้านี้ทุก component ต้องถูก declare ใน NgModule ซึ่งทำให้

• โค้ดซับซ้อนโดยไม่จำเป็น
• ต้อง import module ซ้อนกันหลายชั้น
• เริ่มต้นโปรเจ็คใหม่ยุ่งยาก

วิธีสร้าง Standalone Component

เพียงเพิ่ม standalone: true ใน decorator

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule, RouterLink],
  template: `
    <h1>หน้าหลัก</h1>
    <a routerLink="/about">เกี่ยวกับเรา</a>
  `
})
export class HomeComponent {}

Bootstrap แบบ Standalone

ใน main.ts ใช้ bootstrapApplication แทน bootstrapModule

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes)
  ]
});

Lazy Loading แบบ Standalone

// app.routes.ts
export const routes = [
  {
    path: 'dashboard',
    loadComponent: () =>
      import('./dashboard/dashboard.component')
        .then(m => m.DashboardComponent)
  }
];

เปรียบเทียบ NgModule vs Standalone

หัวข้อ	NgModule	Standalone
การ declare	ต้องใส่ใน NgModule	ไม่ต้อง
การ import	import ทั้ง Module	import เฉพาะที่ใช้
Bundle size	ใหญ่กว่า	เล็กกว่า (tree-shaking ดีกว่า)
ความซับซ้อน	สูง	ต่ำ

สรุป

Standalone Components เป็นทิศทางหลักของ Angular ในอนาคต Angular 17+ ใช้ Standalone เป็น default แล้ว ถ้าเริ่มโปรเจ็คใหม่ควรใช้ Standalone ตั้งแต่ต้นเลยครับ