Standalone component

Mục lụcCopy Anchor Link

• Standalone component là gì
  • Một component vẫn gồm những phần nào
  • Mô hình tư duy trước và sau
• Vì sao Angular chọn standalone làm mặc định
  • Phụ thuộc hiện ra tại nơi dùng
  • Ít mã nghi thức hơn, nhưng không ít cấu trúc hơn
  • Standalone và NgModule cùng tồn tại
• Đọc metadata của standalone component
  • Các trường hay gặp
  • Sơ đồ Angular dựng giao diện
• imports: đưa khả năng vào template
  • Phân biệt import TypeScript và imports của component
  • Import directive, pipe và component
  • Khi nào dùng CommonModule
• providers: nơi Angular tạo và tìm dependency
  • Ba phạm vi provider cần nhớ
  • Chọn đúng phạm vi
• Bootstrap ứng dụng standalone
  • main.ts khởi động root component
  • Cấu hình ứng dụng trong app.config.ts
  • Luồng khởi động
• Ví dụ hoàn chỉnh: danh sách sản phẩm
  • Bước 1: component con hiển thị một sản phẩm
  • Bước 2: root component ghép các card
  • Bước 3: bootstrap ứng dụng
  • Đi theo một lần render
• Tổ chức mã trong ứng dụng lớn hơn
  • Tách theo tính năng thay vì gom mọi thứ vào shared
  • Lazy loading với route standalone
• Chuyển dần từ NgModule sang standalone
  • Đọc cấu trúc cũ trước khi đổi
  • Lộ trình chuyển đổi an toàn
  • Ví dụ chuyển một component
• Trade-off và các quyết định thực tế
  • Điểm mạnh
  • Điều standalone không tự giải quyết
  • Khi nào vẫn gặp NgModule
• Lỗi phổ biến và cách gỡ
  • Không nhận ra component, directive hoặc pipe
  • Đặt provider sai phạm vi
  • Bootstrap nhầm component hoặc quên provider
  • Nhầm imports với providers
  • Dùng lại thói quen NgModule không phù hợp
• Danh sách kiểm tra trước khi hoàn thành
• Tóm tắt

Standalone component là gìCopy Anchor Link

Standalone component là component có thể tham gia trực tiếp vào cây giao diện mà không cần được khai báo trong một NgModule. Thay vì để một module nói rằng component nào, directive nào và pipe nào có thể đi cùng nhau, chính component khai báo những thứ template của nó cần trong mảng imports.

Điều này không biến Angular thành thư viện ghép HTML thủ công. Angular vẫn biên dịch template, vẫn quản lý dependency injection (DI — cơ chế cung cấp đối tượng phụ thuộc), vẫn có router, forms và lazy loading. Thay đổi nằm ở ranh giới khai báo: dependency của giao diện được đặt gần giao diện sử dụng nó.

Ví dụ tối giản sau là một standalone component. Trong Angular hiện đại, standalone: true thường không cần ghi vì đây là giá trị mặc định. Ghi rõ nó vẫn hữu ích khi bạn đang học hoặc đọc mã trộn lẫn phiên bản cũ và mới.

import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: `<p>Chào {{ name }}!</p>`,
})
export class WelcomeComponent {
  name = 'Angular';
}

WelcomeComponent có thể được dùng trong template của một standalone component khác sau khi component cha thêm nó vào imports. Nó cũng có thể là component được router tải hoặc, nếu là component gốc, được bootstrap khi ứng dụng bắt đầu chạy.

Một component vẫn gồm những phần nàoCopy Anchor Link

Từ khóa standalone chỉ nói cách component được khai báo và ghép vào ứng dụng. Nó không thay đổi trách nhiệm cơ bản của component:

Nói ngắn gọn: standalone không bỏ component, template hay DI. Nó chỉ không bắt bạn tạo một NgModule trung gian cho mọi component mới.

Mô hình tư duy trước và sauCopy Anchor Link

Trong kiến trúc dựa trên NgModule, một component không tự nói được template của nó có thể dùng gì. Angular nhìn vào declarations và imports của module chứa component đó. Trong standalone, component giữ danh sách khả năng template của chính mình.

direction: right

old: "NgModule\nProductCardComponent" {
  width: 184
  height: 58
}

module: "ProductsModule\ndeclarations:\nProductCardComponent\nimports: CommonModule" {
  width: 192
  height: 100
}

oldTemplate: "Template dùng currency" {
  width: 200
  height: 58
}

new: "Standalone\nProductCardComponent" {
  width: 184
  height: 58
}

pipe: "imports: CurrencyPipe" {
  width: 192
  height: 58
}

newTemplate: "Template dùng currency" {
  width: 200
  height: 58
}

old -> module
module -> oldTemplate
new -> pipe
pipe -> newTemplate

Sơ đồ không có nghĩa mọi dependency phải được lặp lại vô ích. Angular có thể biên dịch và tối ưu dependency theo cách riêng. Ý nghĩa thực tế cho người đọc mã là: mở file component, bạn thấy ngay template đó dựa vào API UI nào.

Vì sao Angular chọn standalone làm mặc địnhCopy Anchor Link

Angular chuyển standalone thành mặc định cho component mới để luồng học và phát triển phù hợp hơn với cách ứng dụng được xây dựng ngày nay. Một màn hình thường bắt đầu bằng một component; bắt buộc tạo thêm module chỉ để khai báo component đó tạo ra một bước gián tiếp mà người mới chưa cần.

Phụ thuộc hiện ra tại nơi dùngCopy Anchor Link

Hãy xem một template dùng RouterLink và DatePipe. Với standalone, dependency nằm cạnh template:

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

@Component({
  selector: 'app-order-summary',
  imports: [DatePipe, RouterLink],
  templateUrl: './order-summary.component.html',
})
export class OrderSummaryComponent {
  createdAt = new Date();
}

Người bảo trì không cần tìm OrdersModule, rồi suy luận directive nào module đó nhận từ module khác. Họ có thể kiểm tra imports ngay trong file đang sửa. Lợi ích lớn nhất là tính cục bộ khi đọc mã, không phải là việc phải gõ ít một dòng cấu hình.

Ít mã nghi thức hơn, nhưng không ít cấu trúc hơnCopy Anchor Link

Không có NgModule không có nghĩa đặt toàn bộ component vào một thư mục hay import bừa bãi để lỗi biến mất. Ứng dụng vẫn cần ranh giới theo tính năng, route, lớp dữ liệu và component dùng chung.

Standalone giảm phần mã nghi thức như sau:

direction: right

old: "NgModule\nTạo component" {
  width: 130
  height: 58
}

declare: "Khai báo trong\nfeature module" {
  width: 136
  height: 58
}

deps: "Import module UI\nKiểm tra exports" {
  width: 152
  height: 58
}

new: "Standalone\nTạo component" {
  width: 130
  height: 58
}

imports: "Thêm dependency\ntemplate vào imports" {
  width: 184
  height: 58
}

attach: "Gắn vào route\nhoặc component cha" {
  width: 168
  height: 58
}

old -> declare
declare -> deps
new -> imports
imports -> attach

Điểm cần giữ lại là kỷ luật thiết kế: component cha sở hữu state của màn hình, component con nhận input và phát sự kiện, service chứa logic không thuộc một template cụ thể.

Standalone và NgModule cùng tồn tạiCopy Anchor Link

Standalone là hướng mặc định, không phải một ranh giới tương thích. Ứng dụng cũ có NgModule vẫn chạy được. Một standalone component có thể import một NgModule; nhờ đó template của nó dùng được các declarable mà module ấy export. Ngược lại, một NgModule có thể import standalone component, directive hoặc pipe.

Điều không được phép là khai báo standalone component trong declarations của NgModule. Standalone component đã tự khai báo phạm vi của nó; nếu module cần dùng nó, hãy đưa nó vào imports.

Đọc metadata của standalone componentCopy Anchor Link

Decorator @Component() là metadata — dữ liệu mô tả class cho Angular. Angular đọc metadata này để biết selector nào tạo component, template ở đâu và template được phép dùng những API nào.

import { Component, input } from '@angular/core';
import { CurrencyPipe } from '@angular/common';

@Component({
  selector: 'app-price-tag',
  imports: [CurrencyPipe],
  templateUrl: './price-tag.component.html',
  styleUrl: './price-tag.component.css',
})
export class PriceTagComponent {
  amount = input.required<number>();
}

Các trường hay gặpCopy Anchor Link

Một component chỉ cần một trong template hoặc templateUrl. Tương tự, phiên bản Angular hiện đại cho phép styleUrl; dự án cũ có thể dùng styleUrls với một mảng. Hãy khớp cú pháp với phiên bản Angular của dự án bạn.

Sơ đồ Angular dựng giao diệnCopy Anchor Link

Khi Angular gặp selector của component trong template cha, nó cần ba nhóm thông tin: class nào tạo state, template nào tạo DOM và dependency template nào được phép xuất hiện.

direction: right

template: "AppComponent\ngặp <app-price-tag>" {
  width: 176
  height: 58
}

metadata: "PriceTag metadata\nselector + templateUrl\nimports: CurrencyPipe\nproviders nếu có" {
  width: 200
  height: 100
}

instance: "Tạo instance\nInject từ injector gần\nnhất" {
  width: 200
  height: 79
}

render: "Render template\nvới amount()" {
  width: 144
  height: 58
}

template -> metadata -> instance -> render

imports không phải danh sách file TypeScript mà class cần chạy. Nó là danh sách các khối xây dựng có thể xuất hiện trong HTML template. Phân biệt này sẽ tránh rất nhiều lỗi lúc mới học.

imports: đưa khả năng vào templateCopy Anchor Link

Mỗi standalone component có một phạm vi template riêng. Nếu template viết <app-product-card>, routerLink, date hoặc ngClass, Angular phải biết symbol tương ứng. Hãy import symbol đó ở đầu file TypeScript và thêm nó vào metadata imports.

Phân biệt import TypeScript và imports của componentCopy Anchor Link

Hai dòng dưới đây trông giống nhau nhưng phục vụ hai thời điểm khác nhau:

import { CurrencyPipe } from '@angular/common'; // TypeScript thấy tên CurrencyPipe

@Component({
  imports: [CurrencyPipe], // template được phép dùng pipe currency
  // ...
})
export class PriceTagComponent {}

• Câu import ... from ... là import của TypeScript/JavaScript. Nó cho phép file tham chiếu tới CurrencyPipe.
• Thuộc tính imports: [...] là metadata của Angular template compiler. Nó đưa CurrencyPipe vào phạm vi template.

Một import TypeScript đơn thuần không làm pipe hoạt động trong HTML. Ngược lại, bạn không thể ghi tên một symbol vào metadata nếu TypeScript chưa import tên đó vào file.

Import directive, pipe và componentCopy Anchor Link

Ví dụ bên dưới dùng ba loại dependency phổ biến: một component con, một directive điều hướng và một pipe định dạng tiền.

import { Component } from '@angular/core';
import { CurrencyPipe } from '@angular/common';
import { RouterLink } from '@angular/router';
import { ProductCardComponent } from './product-card.component';

@Component({
  selector: 'app-catalog',
  imports: [ProductCardComponent, RouterLink, CurrencyPipe],
  template: `
    <a routerLink="/cart">Xem giỏ hàng</a>
    <app-product-card />
    <p>Từ {{ lowestPrice | currency: 'VND' }}</p>
  `,
})
export class CatalogComponent {
  lowestPrice = 120_000;
}

Quy tắc thực hành tốt là import đúng symbol đang dùng. Ví dụ, dùng RouterLink khi template chỉ có liên kết; dùng RouterOutlet khi template có <router-outlet />; dùng CurrencyPipe khi cần định dạng tiền. Danh sách ngắn giúp dependency của template dễ nhìn hơn.

Khi nào dùng CommonModuleCopy Anchor Link

CommonModule là một NgModule cũ nhưng vẫn tương thích và hữu ích. Nó export nhiều directive và pipe phổ biến như NgIf, NgFor, NgClass, AsyncPipe và DatePipe. Bạn có thể import cả module vào standalone component:

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

@Component({
  selector: 'app-status',
  imports: [CommonModule],
  template: `
    <p *ngIf="isOnline" [ngClass]="'status-online'">Đang kết nối</p>
  `,
})
export class StatusComponent {
  isOnline = true;
}

Trong Angular mới, control flow dựng sẵn @if, @for và @switch không cần CommonModule:

@Component({
  selector: 'app-status',
  template: `
    @if (isOnline) {
      <p>Đang kết nối</p>
    } @else {
      <p>Mất kết nối</p>
    }
  `,
})
export class StatusComponent {
  isOnline = true;
}

Nếu chỉ cần một pipe hoặc directive standalone, import trực tiếp symbol đó thường làm ý định rõ hơn. Nếu template dùng nhiều API cũ của CommonModule, import CommonModule là lựa chọn thực dụng. Không cần chuyển mọi dòng sang import riêng chỉ để tuân theo một quy tắc hình thức.

providers: nơi Angular tạo và tìm dependencyCopy Anchor Link

providers liên quan tới DI, không liên quan tới việc Angular nhận diện thẻ HTML. Provider là quy tắc cho injector biết phải tạo hoặc trả về giá trị nào khi một class yêu cầu dependency.

Ví dụ, ProductApi là service lấy dữ liệu. Khai báo providedIn: 'root' làm service có một instance chia sẻ toàn ứng dụng trong injector gốc:

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ProductApi {
  list() {
    return ['Bàn phím', 'Chuột'];
  }
}

Component có thể yêu cầu service bằng inject():

import { Component, inject } from '@angular/core';
import { ProductApi } from './product-api.service';

@Component({
  selector: 'app-catalog',
  template: `<p>Có {{ products.length }} sản phẩm</p>`,
})
export class CatalogComponent {
  private readonly productApi = inject(ProductApi);
  products = this.productApi.list();
}

Ở đây không cần thêm ProductApi vào imports hay providers, vì providedIn: 'root' đã đăng ký nó ở injector gốc. inject() nói component cần gì; provider quyết định Angular lấy dependency ấy ở đâu.

Ba phạm vi provider cần nhớCopy Anchor Link

Route cũng có thể khai báo providers; khi đó dependency chỉ sống trong route và các route con. Đây là phạm vi hữu ích cho một feature được lazy load, nhưng bạn chưa cần dùng nó cho màn hình nhỏ đầu tiên.

Chọn đúng phạm viCopy Anchor Link

Hãy quyết định bằng câu hỏi: ai cần chia sẻ instance này?

• Nếu nhiều phần xa nhau trong ứng dụng cần cùng service, dùng providedIn: 'root' hoặc provider cấp ứng dụng.
• Nếu chỉ một feature cần cấu hình hoặc state riêng, cân nhắc route provider.
• Nếu mỗi ProductEditorComponent phải có bộ đệm thay đổi độc lập, đặt provider ở component. Mỗi editor trên trang sẽ nhận một instance riêng.

import { Component } from '@angular/core';
import { DraftService } from './draft.service';

@Component({
  selector: 'app-product-editor',
  providers: [DraftService],
  template: `<!-- biểu mẫu chỉnh sửa -->`,
})
export class ProductEditorComponent {}

Bootstrap ứng dụng standaloneCopy Anchor Link

Bootstrap là bước khởi động Angular trong trang HTML. Ứng dụng standalone thường gọi bootstrapApplication() và truyền vào root component thay vì bootstrap một AppModule.

main.ts khởi động root componentCopy Anchor Link

Một dự án Angular mới thường có src/main.ts gần như sau:

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig).catch((error) =>
  console.error(error),
);

AppComponent là điểm bắt đầu của cây UI. Nó phải là standalone để Angular bootstrap trực tiếp:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  template: `<router-outlet />`,
})
export class AppComponent {}

Cấu hình ứng dụng trong app.config.tsCopy Anchor Link

Các provider cấp ứng dụng được gom trong ApplicationConfig. Ví dụ phổ biến là đăng ký router và HTTP client:

import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideRouter(routes),
  ],
};

provideHttpClient() làm HttpClient có thể được inject trong ứng dụng. provideRouter(routes) đăng ký router. Chúng không được đưa vào imports của component vì chúng không tạo thẻ, directive hay pipe trong template.

Một số thư viện cũ chỉ cung cấp NgModule.forRoot(...). Trong thời gian chuyển đổi, importProvidersFrom() có thể đưa providers của module ấy vào cấu hình ứng dụng. Đây là cầu nối tương thích, không phải lý do để tạo AppModule mới.

import { ApplicationConfig, importProvidersFrom } from '@angular/core';
import { LegacyLibraryModule } from 'legacy-library';

export const appConfig: ApplicationConfig = {
  providers: [importProvidersFrom(LegacyLibraryModule.forRoot())],
};

Luồng khởi độngCopy Anchor Link

direction: right

entry: "index.html\nmain.ts" {
  width: 130
  height: 58
}

bootstrap: "bootstrapApplication\nAppComponent +\nappConfig" {
  width: 184
  height: 79
}

injector: "App injector\nappConfig.providers" {
  width: 176
  height: 58
}

app: "Tạo AppComponent\nrender template" {
  width: 152
  height: 58
}

router: "<router-outlet>\nChọn theo URL" {
  width: 144
  height: 58
}

children: "Component con\nRender theo imports" {
  width: 176
  height: 58
}

entry -> bootstrap
bootstrap -> injector
bootstrap -> app
app -> router
app -> children

Khi ứng dụng không dùng router, root component có thể render component con trực tiếp. Router không phải điều kiện để dùng standalone; nó chỉ là một cách phổ biến để ghép các màn hình.

Ví dụ hoàn chỉnh: danh sách sản phẩmCopy Anchor Link

Ví dụ này xây dựng từ trong ra ngoài: component con hiển thị một sản phẩm, root component giữ mảng sản phẩm, cuối cùng main.ts khởi động ứng dụng. Ví dụ dùng input() để component con nhận dữ liệu; đây là API input hiện đại của Angular.

Bước 1: component con hiển thị một sản phẩmCopy Anchor Link

Tạo product-card.component.ts. Component này chỉ biết cách hiển thị một Product; nó không sở hữu danh sách sản phẩm của cả trang.

import { Component, input } from '@angular/core';
import { CurrencyPipe } from '@angular/common';

export interface Product {
  id: number;
  name: string;
  price: number;
  inStock: boolean;
}

@Component({
  selector: 'app-product-card',
  imports: [CurrencyPipe],
  template: `
    <article class="card">
      <h2>{{ product().name }}</h2>
      <p>{{ product().price | currency: 'VND' }}</p>
      @if (product().inStock) {
        <span>Còn hàng</span>
      } @else {
        <span>Hết hàng</span>
      }
    </article>
  `,
  styles: `
    .card { border: 1px solid #d1d5db; border-radius: 8px; padding: 16px; }
  `,
})
export class ProductCardComponent {
  product = input.required<Product>();
}

product là input bắt buộc. Dấu () trong product() là cách đọc giá trị của input signal. CurrencyPipe phải có trong imports vì template dùng | currency. Ngược lại, @if là control flow dựng sẵn nên không cần import thêm.

Bước 2: root component ghép các cardCopy Anchor Link

AppComponent import ProductCardComponent vì template của nó đặt thẻ <app-product-card>. Root component sở hữu mảng products vì đây là state của toàn màn hình.

import { Component } from '@angular/core';
import { Product, ProductCardComponent } from './product-card.component';

@Component({
  selector: 'app-root',
  imports: [ProductCardComponent],
  template: `
    <main>
      <h1>Sản phẩm nổi bật</h1>

      <section class="grid">
        @for (item of products; track item.id) {
          <app-product-card [product]="item" />
        }
      </section>
    </main>
  `,
  styles: `
    .grid { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
  `,
})
export class AppComponent {
  products: Product[] = [
    { id: 1, name: 'Bàn phím cơ', price: 1_290_000, inStock: true },
    { id: 2, name: 'Chuột không dây', price: 690_000, inStock: false },
  ];
}

@for lặp qua mảng. Biểu thức track item.id cho Angular một định danh ổn định để liên hệ dữ liệu với DOM khi danh sách thay đổi. ProductCardComponent không cần biết mảng đến từ API, signal hay giá trị tĩnh; nó chỉ nhận từng Product qua binding [product]="item".

Bước 3: bootstrap ứng dụngCopy Anchor Link

Với ví dụ chưa có router hay HTTP, main.ts có thể tối giản:

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

bootstrapApplication(AppComponent).catch((error) => console.error(error));

Không có AppModule, BrowserModule hay declarations nào trong luồng này. Angular nhận root component trực tiếp, sau đó lần theo imports ở mỗi template để dựng phần giao diện còn lại.

Đi theo một lần renderCopy Anchor Link

Khi trình duyệt mở ứng dụng, chuỗi sự kiện dễ hình dung như sau:

1. bootstrapApplication() tạo AppComponent.
2. Template của AppComponent chạy @for trên hai phần tử của products.
3. Mỗi vòng lặp tạo một <app-product-card> và truyền item vào input product.
4. Angular tạo một ProductCardComponent cho từng item.
5. Template card đọc product(), rồi CurrencyPipe định dạng giá.
6. @if trong card hiển thị nhãn còn hàng hoặc hết hàng.

Nếu sau này thêm nút “Thêm vào giỏ”, card nên phát một sự kiện lên cha. Component cha cập nhật state giỏ hàng. Ranh giới này sẽ được mở rộng trong bài Giao tiếp giữa component.

Tổ chức mã trong ứng dụng lớn hơnCopy Anchor Link

Standalone làm file component tự chủ hơn, nhưng một ứng dụng lớn vẫn phải có cấu trúc. Hãy đặt file theo tính năng và vai trò, không theo danh sách module.

Tách theo tính năng thay vì gom mọi thứ vào sharedCopy Anchor Link

Một cách tổ chức đơn giản cho feature catalog:

src/app/
├── app.component.ts
├── app.config.ts
├── app.routes.ts
└── features/
    └── catalog/
        ├── catalog-page.component.ts
        ├── product-card.component.ts
        ├── product-api.service.ts
        └── catalog.routes.ts

catalog-page.component.ts import ProductCardComponent vì dùng nó. ProductApi có thể providedIn: 'root' nếu API client được dùng lại, hoặc được đặt ở route provider nếu state/dịch vụ chỉ thuộc catalog. Không cần tạo CatalogModule chỉ để nối các file này.

Hãy thận trọng với thư mục shared. Một button, pipe định dạng hoặc layout thật sự dùng ở nhiều feature có thể là shared. Component chỉ tình cờ được dùng lại hai lần trong catalog vẫn nên ở catalog. Đặt đúng chủ sở hữu giúp tránh thư mục chung thành nơi không ai dám sửa.

Lazy loading với route standaloneCopy Anchor Link

Router có thể lazy load trực tiếp một standalone component. Khi người dùng chỉ mở trang /catalog, Angular mới tải code của trang catalog:

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'catalog',
    loadComponent: () =>
      import('./features/catalog/catalog-page.component').then(
        (file) => file.CatalogPageComponent,
      ),
  },
];

Điểm quan trọng là CatalogPageComponent tự mang imports cần cho template của nó. Nếu feature có nhiều route con, bạn có thể lazy load một mảng route bằng loadChildren; standalone không loại bỏ lựa chọn đó.

Chuyển dần từ NgModule sang standaloneCopy Anchor Link

Không cần dừng mọi tính năng để viết lại toàn bộ ứng dụng cũ. Angular cho phép hai mô hình tương tác, vì vậy cách ít rủi ro là chuyển theo lát cắt nhỏ và kiểm tra sau mỗi lát cắt.

Đọc cấu trúc cũ trước khi đổiCopy Anchor Link

Trước khi chuyển một component, hãy trả lời các câu hỏi sau:

• Component đang ở declarations của module nào?
• Template của nó dùng component, directive và pipe nào mà module hiện đang import?
• Module có export component đó cho feature khác không?
• Module có provider nào tạo singleton hoặc cấu hình qua forRoot() không?
• Component có phải entry point của router hay bootstrap hiện tại không?

Các câu hỏi này biến việc migration từ “thử xóa module xem có chạy không” thành một danh sách dependency cụ thể. Đặc biệt, đừng vô tình chuyển provider từ phạm vi module sang component nếu bạn chưa muốn thay đổi số lượng instance service.

Lộ trình chuyển đổi an toànCopy Anchor Link

1. Bắt đầu từ leaf component. Chọn component ít phụ thuộc và không phải root. Nó dễ chuyển, dễ kiểm tra và ít ảnh hưởng route.
2. Đổi component thành standalone. Thêm standalone: true nếu phiên bản dự án yêu cầu, rồi chuyển dependency template từ module sang imports của component.
3. Sửa nơi đang dùng component. Xóa component khỏi declarations. Thêm nó vào imports của NgModule hoặc standalone component đang sử dụng nó.
4. Chạy test hoặc mở màn hình liên quan. Lỗi thiếu directive/pipe sẽ xuất hiện đúng khi template được biên dịch hoặc render.
5. Lặp lại theo feature. Chỉ chuyển bootstrap từ AppModule sang bootstrapApplication() khi root và provider đã được hiểu rõ.

Angular CLI có schematics migration hỗ trợ nhiều phần công việc, nhưng công cụ không thể quyết định ranh giới state hay phạm vi provider thay bạn. Hãy đọc diff do công cụ tạo và kiểm tra từng bước.

Ví dụ chuyển một componentCopy Anchor Link

Trước đây, OrdersModule khai báo component và import CommonModule cho toàn bộ template trong module:

@NgModule({
  declarations: [OrderBadgeComponent],
  imports: [CommonModule],
  exports: [OrderBadgeComponent],
})
export class OrdersModule {}

Sau khi chuyển, component tự import pipe/directive template cần. Ví dụ này chỉ dùng NgClass, vì vậy import trực tiếp nó thay cho cả module:

import { Component } from '@angular/core';
import { NgClass } from '@angular/common';

@Component({
  selector: 'app-order-badge',
  standalone: true,
  imports: [NgClass],
  template: `<span [ngClass]="status">{{ status }}</span>`,
})
export class OrderBadgeComponent {
  status = 'pending';
}

Nếu một OrdersModule cũ vẫn dùng badge, module mới import component này:

@NgModule({
  imports: [OrderBadgeComponent],
  exports: [OrderBadgeComponent],
})
export class OrdersModule {}

Sau khi mọi consumer đã là standalone, bạn có thể bỏ phần module chỉ làm nhiệm vụ bọc lại. Tuy nhiên, chỉ xóa module khi không còn route, provider hoặc consumer nào cần nó.

Trade-off và các quyết định thực tếCopy Anchor Link

Standalone là mặc định tốt cho ứng dụng mới, nhưng không phải một phép tối ưu tự động cho mọi vấn đề kiến trúc. Hiểu mặt đổi chác giúp bạn dùng nó đúng mục đích.

Điểm mạnhCopy Anchor Link

• Đường học ngắn hơn: tạo một component rồi dùng nó ngay, không cần học declarations, exports và bootstrap của module trước.
• Dependency template rõ: file component cho thấy gần như toàn bộ UI API nó dùng.
• Lazy loading trực tiếp: router có thể tải một component hoặc route độc lập.
• Migration tăng dần: standalone và NgModule tương thích trong thời gian chuyển đổi.
• Ranh giới feature tự nhiên: dependency UI đi theo component/route thay vì bị gom vào một module rất lớn.

Điều standalone không tự giải quyếtCopy Anchor Link

Standalone không tự làm component nhỏ hơn, state tốt hơn hay bundle nhỏ hơn nếu bạn vẫn import dependency không cần thiết. Nó cũng không thay service, router, forms hay quy tắc giao tiếp giữa cha và con.

Ví dụ, một DashboardComponent standalone với 2.000 dòng template và 30 dependency vẫn khó bảo trì. Cách xử lý là tách component theo trách nhiệm UI và giữ state hợp lý, không phải thêm một DashboardModule trở lại.

Tương tự, providers ở component không thay thế kiến trúc state. Trước khi tạo provider mới, hãy xác định state được chia sẻ bởi ai và khi nào cần bị hủy. Câu trả lời quyết định scope, không phải việc component có standalone hay không.

Khi nào vẫn gặp NgModuleCopy Anchor Link

Bạn vẫn có thể gặp NgModule trong các trường hợp sau:

• Ứng dụng được tạo bằng Angular cũ và chưa migration.
• Thư viện bên thứ ba chưa có API standalone hoặc provide...() tương đương.
• Một feature đang được chuyển đổi dần nên phải tương thích với phần còn lại.
• Tài liệu hoặc ví dụ cũ dùng declarations, exports, forRoot() và AppModule.

Không cần né NgModule bằng mọi giá. Với mã mới do bạn kiểm soát, ưu tiên standalone. Với mã cũ hoặc thư viện cũ, dùng lớp tương thích nhỏ, hiểu rõ và có kế hoạch thay thế nếu nó gây cản trở.

Lỗi phổ biến và cách gỡCopy Anchor Link

Khi mới dùng standalone, đa số lỗi xuất phát từ nhầm phạm vi template với phạm vi DI. Bắt đầu từ thông báo lỗi và phần template/component được nêu trong stack trace, thay vì sửa ở root component theo thói quen.

Không nhận ra component, directive hoặc pipeCopy Anchor Link

Dấu hiệu: Angular báo thẻ không phải phần tử đã biết, không biết property như routerLink/ngClass, hoặc không tìm thấy pipe như currency.

Nguyên nhân: dependency có import TypeScript nhưng thiếu trong metadata imports, hoặc được thêm vào nhầm component khác.

Cách sửa: thêm symbol đúng vào component chứa template lỗi.

import { CurrencyPipe, NgClass } from '@angular/common';
import { RouterLink } from '@angular/router';

@Component({
  imports: [CurrencyPipe, NgClass, RouterLink],
  // template dùng | currency, [ngClass] và routerLink
})
export class CheckoutComponent {}

Nếu template dùng component con, import class component con. Nếu component con chưa standalone mà thuộc NgModule, import NgModule export nó. Với dự án Angular mới, kiểm tra trước xem bạn có thể chuyển component con sang standalone hay không.

Đặt provider sai phạm viCopy Anchor Link

Dấu hiệu: hai component đáng lẽ chia sẻ giỏ hàng nhưng lại có dữ liệu khác nhau; hoặc state form đáng lẽ tách riêng lại ảnh hưởng lẫn nhau.

Nguyên nhân: service được thêm vào providers của component dù bạn muốn singleton toàn ứng dụng, hoặc ngược lại.

Cách sửa: di chuyển provider theo chủ sở hữu state. Giỏ hàng chung thường dùng providedIn: 'root'. Draft của mỗi form thường đặt ở component hoặc route scope. Viết một kiểm tra đơn giản: render hai instance component, thay đổi state một bên và quan sát bên còn lại. Kết quả phải khớp với ý định chia sẻ của bạn.

Bootstrap nhầm component hoặc quên providerCopy Anchor Link

Dấu hiệu: ứng dụng không khởi động, route không hoạt động, hoặc inject HttpClient báo không có provider.

Nguyên nhân: bootstrapApplication() nhận nhầm component, root component không standalone, hoặc appConfig.providers thiếu provideRouter()/provideHttpClient().

Cách sửa: kiểm tra theo thứ tự sau:

1. main.ts import đúng AppComponent và gọi bootstrapApplication(AppComponent, appConfig).
2. AppComponent có metadata component hợp lệ và là standalone theo phiên bản Angular hiện dùng.
3. app.config.ts đăng ký các provider hạ tầng mà ứng dụng inject.
4. AppComponent import RouterOutlet nếu template dùng <router-outlet />.

Nhầm imports với providersCopy Anchor Link

Dấu hiệu: thêm HttpClient vào imports nhưng vẫn không inject được; hoặc thêm RouterLink vào providers nhưng template vẫn báo lỗi.

Nguyên nhân: imports dành cho component/directive/pipe trong template. providers dành cho DI token, service hoặc hàm provide...().

Cách nhớ nhanh: nếu bạn đang đặt một thẻ, directive hoặc pipe trong HTML, nghĩ đến imports. Nếu class gọi inject(...) hoặc constructor yêu cầu một dependency, nghĩ đến provider.

Dùng lại thói quen NgModule không phù hợpCopy Anchor Link

Dấu hiệu: tạo một SharedModule khổng lồ chỉ để export mọi directive/pipe; thêm BrowserModule vào imports của mỗi standalone component; hoặc đưa standalone component vào declarations.

Cách sửa:

• Import component, directive và pipe ngay tại component dùng chúng.
• Chỉ import CommonModule khi nó thực sự tiện hơn nhiều import riêng.
• Với bootstrap standalone, dùng bootstrapApplication(); không import BrowserModule vào component.
• Khi NgModule cần dùng standalone component, thêm nó vào imports, không phải declarations.

Danh sách kiểm tra trước khi hoàn thànhCopy Anchor Link

Trước khi xem một standalone component là xong, hãy tự rà soát:

• Component có selector, template hoặc templateUrl rõ ràng.
• Mọi component, directive và pipe được template dùng đều có trong imports của đúng component.
• Không có standalone component nào nằm trong declarations của NgModule.
• Provider được đặt theo phạm vi chia sẻ state mong muốn.
• Root component được bootstrap bằng bootstrapApplication() nếu ứng dụng theo mô hình standalone.
• Router, HTTP và provider hạ tầng được đăng ký trong app.config.ts khi cần.
• Component con không tự sở hữu state vốn thuộc cả trang; nó nhận input và báo sự kiện lên cha.
• Bạn đã mở màn hình hoặc chạy test liên quan sau khi đổi imports/providers.

Tóm tắtCopy Anchor Link

Standalone component là cách Angular hiện đại tổ chức giao diện mà không cần NgModule làm nơi khai báo bắt buộc. Mỗi component mang imports cho những thứ template sử dụng; providers vẫn thuộc hệ thống DI và phải được chọn theo phạm vi chia sẻ dependency.

Luồng cốt lõi cần nhớ là: main.ts gọi bootstrapApplication() → Angular tạo root component và injector cấp ứng dụng → template của mỗi component dùng đúng dependency trong imports → component con nhận dữ liệu từ cha. Bắt đầu với component nhỏ, import đúng symbol, rồi chỉ mở rộng provider khi bạn hiểu state cần được chia sẻ ở đâu.