angular-standalone

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Angular Standalone Components

Version: Angular 21 (2025) Tags: Standalone, Components, Imports, Bootstrap

References: Standalone Guide • Migration

版本： Angular 21 (2025) 标签： Standalone, Components, Imports, Bootstrap

参考资料： Standalone 指南 • 迁移指南

API Changes

API 变更

This section documents recent version-specific API changes.

NEW: Standalone by default — New components are standalone by default since Angular 17
NEW: provideRouter for standalone — Use functional providers instead of RouterModule
NEW: ng generate @angular/core:standalone — Migration schematic
DEPRECATED: NgModule — Migration to standalone components recommended

本节记录了近期对应版本的API变动情况。

新增：默认独立化 — 从Angular 17开始，新创建的组件默认是独立组件
新增：面向独立组件的provideRouter — 使用函数式provider替代RouterModule
新增：ng generate @angular/core:standalone — 迁移原理图
已弃用：NgModule — 推荐迁移到独立组件

Best Practices

最佳实践

Create standalone components

@Component({
  standalone: true,
  imports: [CommonModule, MatButtonModule],
  selector: 'app-my',
  template: `<button>Click</button>`
})
export class MyComponent {}

Use imports array for dependencies

@Component({
  standalone: true,
  imports: [
    CommonModule,
    RouterModule,
    MatCardModule,
    MyChildComponent
  ],
  template: `
    <mat-card>
      <app-my-child></app-my-child>
    </mat-card>
  `
})
export class ParentComponent {}

Bootstrap standalone component

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

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

Use functional providers

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

Use provideZoneChangeDetection

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true })
  ]
};

Migrate from NgModule

bash

undefined

创建独立组件

@Component({
  standalone: true,
  imports: [CommonModule, MatButtonModule],
  selector: 'app-my',
  template: `<button>Click</button>`
})
export class MyComponent {}

使用imports数组管理依赖

@Component({
  standalone: true,
  imports: [
    CommonModule,
    RouterModule,
    MatCardModule,
    MyChildComponent
  ],
  template: `
    <mat-card>
      <app-my-child></app-my-child>
    </mat-card>
  `
})
export class ParentComponent {}

引导启动独立组件

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

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

使用函数式provider

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

使用provideZoneChangeDetection

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true })
  ]
};

从NgModule迁移

bash

undefined

Full migration

ng generate @angular/core:standalone

Specific component

ng generate @angular/core:standalone --path=path/to/component


- Use Router Outlet with standalone

```ts
@Component({
  standalone: true,
  imports: [RouterOutlet],
  template: `<router-outlet></router-outlet>`
})
export class AppComponent {}

Lazy load standalone components

const routes: Routes = [
  {
    path: 'admin',
    loadComponent: () => import('./admin/admin.component').then(m => m.AdminComponent)
  }
];

Use forwardRef for circular imports

@Component({
  standalone: true,
  imports: [forwardRef(() => OtherComponent)]
})
export class MyComponent {}

Export standalone components

@Component({
  standalone: true,
  exports: [MyComponent],
  imports: [MyComponent]
})
export class FeatureComponent {}

ng generate @angular/core:standalone --path=path/to/component


- 独立组件中使用Router Outlet

```ts
@Component({
  standalone: true,
  imports: [RouterOutlet],
  template: `<router-outlet></router-outlet>`
})
export class AppComponent {}

懒加载独立组件

const routes: Routes = [
  {
    path: 'admin',
    loadComponent: () => import('./admin/admin.component').then(m => m.AdminComponent)
  }
];

使用forwardRef处理循环导入

@Component({
  standalone: true,
  imports: [forwardRef(() => OtherComponent)]
})
export class MyComponent {}

导出独立组件

@Component({
  standalone: true,
  exports: [MyComponent],
  imports: [MyComponent]
})
export class FeatureComponent {}