angular-standalone

Angular スタンドアロンコンポーネント

バージョン： Angular 21（2025） タグ： スタンドアロン、コンポーネント、インポート、ブートストラップ

参考資料： スタンドアロンガイド • 移行

API の変更点

このセクションでは、バージョン固有の最近の API の変更点について説明します。

• 新機能：スタンドアロンがデフォルト — Angular 17 以降、新しいコンポーネントはデフォルトでスタンドアロンです

• 新機能：スタンドアロン向けの provideRouter — RouterModule の代わりに関数型プロバイダーを使用します

• 新機能：ng generate @angular/core:standalone — 移行用スキーマティック

• 非推奨：NgModule — スタンドアロンコンポーネントへの移行が推奨されます

ベストプラクティス

• スタンドアロンコンポーネントを作成します

@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));

• 関数型プロバイダーを使用します

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

• provideZoneChangeDetection を使用します

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

• NgModule から移行します

# Full migration
ng generate @angular/core:standalone

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

• スタンドアロンで Router Outlet を使用します

@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 {}