Lazy loading service và phạm vi provider

Mục lụcCopy Anchor Link

• Ba lớp cần tách riêng
  • Bundle và thời điểm tải code
  • Injector và phạm vi provider
  • Instance và thời điểm chạy constructor
• Root provider không đồng nghĩa initial chunk
  • Root service chỉ được dùng trong lazy component
  • Khi service đi vào initial hoặc shared chunk
• Route provider thay đổi phạm vi DI
  • Đặt provider bên trong lazy route config
  • Route provider không tự tạo lazy boundary
• Khi root provider và route provider cùng tồn tại
• Luồng thực thi hoàn chỉnh
  • Lần đầu mở lazy route
  • Rời route và quay lại
• Các nhầm lẫn thường gặp
  • Chunk được tải là service được tạo ngay
  • Lazy component biến service thành route scoped
  • Route provider luôn tạo instance mới mỗi lần vào
  • providedIn root luôn làm bundle ban đầu lớn hơn
• Chọn scope theo nhu cầu
• Cách kiểm tra trong dự án
  • Kiểm tra chunk trên trình duyệt
  • Kiểm tra injector và instance
• Tóm tắt
• Tài liệu tham khảo
• Đọc tiếp

Ba lớp cần tách riêngCopy Anchor Link

Khi nói “service được lazy load”, ba hiện tượng khác nhau thường bị gộp thành một:

1. Code splitting: file JavaScript chứa class service chưa được tải ở lần mở ứng dụng đầu tiên.
2. Provider scope: root, route hay component injector chịu trách nhiệm phân giải token và giữ instance.
3. Lazy instantiation: Angular chưa chạy factory hoặc constructor cho đến khi có nơi thực sự inject token.

Ba lớp này liên quan với nhau nhưng không quyết định thay nhau:

direction: right
bundler: "Bundler\nStatic / dynamic import\nquyết định graph/chunk"
di: "Angular DI\nprovidedIn / providers\nquyết định injector sở hữu"
bundler -> di: "Code đã được tải\nvà evaluate"

direction: right
di: "Angular DI\nprovidedIn / providers\nquyết định injector sở hữu"
runtime: "Runtime\nInjector chạy factory,\ntạo và cache instance"
di -> runtime: "Consumer gọi inject(Token)"

Bundle và thời điểm tải codeCopy Anchor Link

Bundler bắt đầu từ entry point như main.ts rồi đi theo các static import. Phần code đi tới được qua graph này thường thuộc initial bundle hoặc một chunk tải lúc khởi động.

// Static import: ReportPage nằm trong graph hiện tại.
import { ReportPage } from './reports/report-page.component';

export const routes: Routes = [
  { path: 'reports', component: ReportPage },
];

Dynamic import() tạo một ranh giới bất đồng bộ. Code phía sau ranh giới có thể được tách khỏi initial bundle:

export const routes: Routes = [
  {
    path: 'reports',
    loadComponent: () =>
      import('./reports/report-page.component').then(
        (m) => m.ReportPage,
      ),
  },
];

Bundler mới là thành phần quyết định file output chính xác. Một service có thể nằm cùng chunk với page, trong một shared chunk của nhiều lazy feature, hoặc trong initial chunk nếu còn một đường import eager khác.

Injector và phạm vi providerCopy Anchor Link

Provider là công thức cho Angular biết cách tạo giá trị của một token. Nơi đăng ký provider quyết định phạm vi tìm kiếm và chia sẻ instance.

Scope DI không mô tả vị trí file JavaScript. Một root service vẫn có thể nằm sau dynamic import. Ngược lại, một route-scoped service vẫn có thể bị tải trong initial bundle nếu route config gốc static import class đó.

Instance và thời điểm chạy constructorCopy Anchor Link

Đăng ký provider chưa đồng nghĩa Angular đã gọi constructor. Injector thường chỉ tạo instance khi token được phân giải lần đầu:

@Injectable({ providedIn: 'root' })
export class AuditService {
  constructor() {
    console.log('AuditService được tạo');
  }
}

Nếu không component, service, guard, resolver hoặc initializer nào inject AuditService, constructor không cần chạy. Nếu AppComponent inject nó, instance được tạo sớm. Nếu chỉ lazy page inject nó, thời điểm tạo sẽ muộn hơn.

Code của class phải được tải trước khi Angular có thể tạo class đó. Tuy nhiên, chiều ngược lại không đúng: tải chunk chỉ evaluate module; nó không bắt buộc tạo mọi service có trong chunk.

Root provider không đồng nghĩa initial chunkCopy Anchor Link

providedIn: 'root' mô tả root injector. Nó không phải chỉ thị cho bundler rằng service phải đi vào initial chunk.

Root service chỉ được dùng trong lazy componentCopy Anchor Link

Giả sử ReportStore chỉ được import bởi một page lazy:

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

@Injectable({ providedIn: 'root' })
export class ReportStore {
  constructor() {
    console.log('Tạo ReportStore');
  }
}

import { Component, inject } from '@angular/core';
import { ReportStore } from './report-store';

@Component({
  standalone: true,
  selector: 'app-report-page',
  template: `<p>Trang báo cáo</p>`,
})
export class ReportPage {
  private readonly store = inject(ReportStore);
}

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

export const routes: Routes = [
  {
    path: 'reports',
    loadComponent: () =>
      import('./reports/report-page.component').then(
        (m) => m.ReportPage,
      ),
  },
];

Nếu không có đường import eager nào khác tới ReportStore, class này thuộc graph lazy của ReportPage. Khi người dùng mở /reports, Router tải code cần thiết. Sau đó ReportPage gọi inject(ReportStore), và root injector tạo rồi giữ instance.

direction: right
open: "Mở ứng dụng\nChưa cần graph ReportPage"
navigate: "Đi tới /reports\nTải lazy graph"
page: "ReportPage"
store: "ReportStore class"
open -> navigate
navigate -> page
navigate -> store

direction: right
store: "ReportStore class"
root: "root EnvironmentInjector\nTạo và giữ instance"
store -> root: "inject(ReportStore)"

Service được tải muộn nhưng vẫn là root-scoped. Lazy loading không tự chuyển nó sang route injector.

Khi service đi vào initial hoặc shared chunkCopy Anchor Link

Cùng một ReportStore có thể chuyển sang initial graph nếu code eager import hoặc inject nó:

// AppComponent được tải lúc bootstrap.
import { ReportStore } from './reports/report-store';

@Component({ /* ... */ })
export class AppComponent {
  private readonly reports = inject(ReportStore);
}

Một số đường tham chiếu thường làm thay đổi vị trí bundle:

• Root component hoặc một eager service import ReportStore.
• ApplicationConfig tham chiếu trực tiếp đến class trong providers hoặc factory.
• Một initializer inject service khi ứng dụng khởi động.
• Một barrel file export nhiều thành phần của feature rồi bị code eager import theo cách giữ lại service.
• Nhiều lazy feature cùng dùng service, khiến bundler tách nó thành shared chunk.

Shared chunk không nhất thiết được tải lúc bootstrap. Nó có thể là chunk dùng chung chỉ được tải khi lazy feature đầu tiên cần tới. Vì vậy, đừng suy luận chỉ từ tên file output; hãy kiểm tra request thực tế trong Network.

Route provider thay đổi phạm vi DICopy Anchor Link

Chỉ khi khai báo provider ở route, service mới trở thành route-scoped. Ranh giới lazy và ranh giới DI nên được đặt cùng feature khi feature thực sự cần một instance riêng.

Đặt provider bên trong lazy route configCopy Anchor Link

Đầu tiên, route gốc chỉ dynamic import file routes của feature:

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

export const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () =>
      import('./admin/admin.routes').then((m) => m.ADMIN_ROUTES),
  },
];

Facade của feature không tự đăng ký ở root:

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

@Injectable()
export class AdminFacade {
  constructor() {
    console.log('Tạo AdminFacade');
  }
}

File route lazy đăng ký facade:

import { Routes } from '@angular/router';
import { AdminFacade } from './admin-facade';

export const ADMIN_ROUTES: Routes = [
  {
    path: '',
    providers: [AdminFacade],
    loadComponent: () =>
      import('./admin-page.component').then((m) => m.AdminPage),
  },
];

Kết quả có hai đặc điểm độc lập:

• admin.routes.ts được tải qua import(), nên AdminFacade thuộc lazy graph của feature nếu không có import eager khác.
• providers: [AdminFacade] làm route injector sở hữu instance. Root injector không sở hữu provider này.

AdminPage, component con, guard hoặc resolver nằm trong phạm vi route có thể inject cùng AdminFacade. Một component ở feature không liên quan sẽ không tìm thấy token này nếu không có provider khác ở tổ tiên.

Route provider không tự tạo lazy boundaryCopy Anchor Link

Cấu hình sau vẫn tạo route-scoped service, nhưng static import đã đưa class service vào graph của app.routes.ts:

import { Routes } from '@angular/router';
import { AdminFacade } from './admin/admin-facade';

export const routes: Routes = [
  {
    path: 'admin',
    providers: [AdminFacade],
    loadComponent: () =>
      import('./admin/admin-page.component').then((m) => m.AdminPage),
  },
];

Ở đây:

• AdminFacade vẫn thuộc route injector.
• Constructor vẫn chỉ chạy khi token được inject.
• Nhưng code của AdminFacade có thể đã nằm trong initial graph vì static import ở file route gốc.

Muốn cả route config và provider của feature ở sau lazy boundary, đặt chúng trong file được tải bằng loadChildren, như ví dụ trước.

Khi root provider và route provider cùng tồn tạiCopy Anchor Link

Có thể một class vừa tự cung cấp ở root vừa được cung cấp lại ở route:

@Injectable({ providedIn: 'root' })
export class CheckoutStore {}

export const CHECKOUT_ROUTES: Routes = [
  {
    path: '',
    providers: [CheckoutStore],
    loadComponent: () =>
      import('./checkout-page.component').then((m) => m.CheckoutPage),
  },
];

Route provider gần consumer hơn nên che root provider cho subtree đó:

direction: right
inside: "Component dưới /checkout"
route: "Route injector\nCó CheckoutStore\nDùng route instance"
inside -> route: "Lookup"

direction: right
outside: "Component ngoài /checkout"
missing: "Không thấy route injector"
root: "Root injector\nCó CheckoutStore\nDùng root instance"
outside -> missing: "Lookup"
missing -> root: "Lookup ở root"

Nếu cả hai vùng đều inject token, ứng dụng có thể có hai instance CheckoutStore. Nếu chỉ route inject token, root provider tồn tại dưới dạng định nghĩa nhưng root instance có thể chưa bao giờ được tạo.

Bảng sau tổng hợp các trường hợp chính:

Luồng thực thi hoàn chỉnhCopy Anchor Link

Lần đầu mở lazy routeCopy Anchor Link

Với ví dụ ReportStore root-scoped nhưng chỉ dùng trong lazy page, trình tự thường là:

1. Trình duyệt tải initial JavaScript và Angular bootstrap ứng dụng.
2. Angular tạo root EnvironmentInjector. ReportStore chưa cần có instance.
3. Người dùng đi tới /reports.
4. Router gọi dynamic import() và trình duyệt tải lazy graph.
5. JavaScript evaluate class ReportPage và ReportStore.
6. Router tạo ReportPage.
7. Field initializer gọi inject(ReportStore).
8. Angular tìm token từ injector gần nhất lên root.
9. Root injector chạy factory, gọi constructor và cache instance.
10. Các consumer sau nhận lại cùng root instance.

Bước 4 và bước 9 không phải một bước. Nếu lazy graph được preload nhưng không có consumer inject service, code đã tải mà constructor vẫn chưa chạy.

Rời route và quay lạiCopy Anchor Link

Sau khi một chunk được tải, JavaScript module thường được trình duyệt giữ trong module cache. Rời route không “gỡ” bytecode của chunk khỏi ứng dụng. Lần quay lại thường không tạo một network request giống lần đầu, trừ khi trang bị reload, cache bị vô hiệu hóa hoặc phiên bản deploy thay đổi.

Đối với instance:

• Root instance thường sống đến khi Angular application bị hủy.
• Component provider gắn rõ nhất với vòng đời của component instance.
• Route provider có phạm vi nhìn thấy theo route tree, nhưng không nên mặc định hiểu là “luôn tạo mới mỗi lần vào URL”. Router có thể giữ route config, route injector hoặc detached route tùy phiên bản và RouteReuseStrategy.

Các nhầm lẫn thường gặpCopy Anchor Link

Chunk được tải là service được tạo ngayCopy Anchor Link

Không. Tải chunk chỉ làm code sẵn sàng. Angular tạo service khi một consumer phân giải token. Preloading cũng có thể tải code từ trước mà không gọi constructor service.

Lazy component biến service thành route scopedCopy Anchor Link

Không. Component được lazy load chỉ thay đổi đường tải code. Service có providedIn: 'root' vẫn do root injector sở hữu, trừ khi có provider gần hơn ở route hoặc component.

Route provider luôn tạo instance mới mỗi lần vàoCopy Anchor Link

Không nên dựa vào giả định này. Route scope xác định vùng phân giải token. Việc injector được giữ hay dọn phụ thuộc vào Router, phiên bản Angular và chiến lược reuse/cleanup của ứng dụng.

providedIn root luôn làm bundle ban đầu lớn hơnCopy Anchor Link

Không. Initial bundle phụ thuộc import graph. Root service chỉ được tham chiếu từ lazy graph vẫn có thể được tải muộn. Nếu service xuất hiện trong initial chunk, hãy tìm đường static import hoặc consumer eager thay vì chỉ nhìn providedIn.

Chọn scope theo nhu cầuCopy Anchor Link

Chọn scope dựa trên nơi state và hành vi cần được chia sẻ. Sau đó mới thiết kế lazy boundary cho bundle.

Một repository không giữ state UI thường có thể tiếp tục dùng providedIn: 'root', kể cả khi hiện tại chỉ một lazy feature sử dụng nó. Không cần chuyển xuống route chỉ để tối ưu bundle.

Ngược lại, một facade giữ state của wizard không nên lên root chỉ vì cú pháp ngắn hơn. Root scope làm state sống và được chia sẻ rộng hơn nhu cầu thực tế.

Cách kiểm tra trong dự ánCopy Anchor Link

Không nên đoán chunk từ decorator. Hãy kiểm tra cả output build và hành vi runtime.

Kiểm tra chunk trên trình duyệtCopy Anchor Link

1. Chạy production build của ứng dụng Angular.
2. Mở trang gốc trong DevTools và chọn tab Network.
3. Lọc request JavaScript và bật Disable cache trong lúc thử nghiệm.
4. Reload trang ở một route eager.
5. Xác nhận chunk feature chưa được tải.
6. Điều hướng tới lazy route và quan sát request mới.
7. Tìm service trong source map hoặc build stats nếu cần biết chunk nào chứa class.

Angular CLI thường có thể tạo build stats để phân tích sâu hơn:

ng build --stats-json

Tên và cách chia chunk là chi tiết của bundler nên có thể đổi sau khi nâng Angular hoặc thay cấu hình. Điều cần xác nhận là bytecode có bị tải ở startup hay chỉ sau hành động mong muốn.

Kiểm tra injector và instanceCopy Anchor Link

Tạm thời gắn ID cho mỗi instance:

@Injectable({ providedIn: 'root' })
export class DebugStore {
  private static nextId = 0;
  readonly id = ++DebugStore.nextId;

  constructor() {
    console.log('Tạo DebugStore instance', this.id);
  }
}

Nếu route cung cấp lại DebugStore, log có thể cho thấy ID khác giữa consumer trong route và consumer bên ngoài. Angular DevTools cũng có Injector Tree để kiểm tra token được phân giải từ injector nào.

Khi debug, kiểm tra riêng hai câu hỏi:

• Network có tải code service ở thời điểm mong muốn không?
• DI có trả đúng instance từ đúng injector không?

Một câu trả lời đúng không bảo đảm câu còn lại đúng.

Tóm tắtCopy Anchor Link

• providedIn: 'root' đặt provider ở root injector; nó không ép service vào initial chunk.
• Static import và dynamic import() tạo import graph để bundler quyết định initial, lazy hoặc shared chunk.
• Angular thường tạo service ở lần phân giải token đầu tiên, không phải ngay khi đăng ký provider hay tải chunk.
• Service root-scoped chỉ được lazy page dùng có thể được tải muộn nhưng vẫn là root singleton.
• providers của route mới tạo route-scoped provider. Lazy loading một component không tự làm điều đó.
• Cung cấp lại root service ở route sẽ shadow root provider và có thể tạo hai instance.
• Chọn scope theo owner của state; chọn lazy boundary theo chi phí bundle; kiểm tra hai việc độc lập bằng Network và Injector Tree.

Tài liệu tham khảoCopy Anchor Link

• Hierarchical injectors: root, route/component injector và quy tắc tìm provider.
• Route loading strategies: eager route, loadComponent, loadChildren và dynamic import.
• Define routes: route-level providers và phạm vi route con.
• Creating and using services: khai báo, tree-shaking và sử dụng service.
• Angular DevTools Injector Tree: quan sát injector sở hữu và đường phân giải token.

Đọc tiếpCopy Anchor Link