はじめに
Angular v19 から、ng generate component コマンドで作成されるコンポーネントは、デフォルトで standalone: true となりました。
これに伴い、たとえば VSCode では次のように standalone: false を明示しても...
@Component({
standalone: false,
})
保存時に自動的に削除されてしまうことがあります。
v19 以降は standalone コンポーネントであることを強く意識する必要がありますね。
本記事では 既存プロジェクトに残っている非standalone コンポーネント と、v19 で作成した standalone コンポーネント を共存させる方法、および standalone コンポーネントのルーティング構成 について整理します。
非standalone コンポーネントのルーティング
以前の記事1 で扱ったように、非standalone コンポーネントは基本的に @NgModule を経由して Angular に認識させます。
具体的には次の構成としています。
- コンポーネントごとに
FeatureModuleを作成 - 各
FeatureModuleをまとめるFeatureAllPageRoutingModuleを用意 - 最終的に
AppModuleで読み込む
例：FeatureTabModule では TabBaseComponent を登録し、FeatureAllPageRoutingModule のルート定義に組み込みます。
FeatureTabModule
@NgModule({
declarations: [SwitchTabComponent, TabBaseComponent, TabAComponent, TabBComponent],
imports: [CommonModule],
exports: [SwitchTabComponent, TabBaseComponent, TabAComponent, TabBComponent],
})
export class FeatureTabModule {}
FeatureAllPageRoutingModule
const ROUTE_TABLE: Routes = [
{ path: 'tab', component: TabBaseComponent },
];
@NgModule({
imports: [RouterModule.forRoot(ROUTE_TABLE)],
exports: [RouterModule],
})
export class FeatureAllPageRoutingModule {}
AppModule
AppModule ではこれらのモジュールをまとめて読み込みます。
@NgModule({
declarations: [AppComponent],
bootstrap: [AppComponent],
imports: [
FeatureAllPageRoutingModule,
FeatureTabModule,
],
providers: [
],
})
export class AppModule {}
standalone コンポーネントの共存
v19 では新しく作成したコンポーネントはすべて standalone です。
非standalone のように @NgModule に登録する必要はなく、 利用する側のコンポーネントで imports に追加するだけ で使用できます。
@Component({
selector: 'app-child',
standalone: true,
template: `<p>子コンポーネントです</p>`,
})
export class ChildComponent {}
@Component({
selector: 'app-parent',
standalone: true,
template: `<app-child></app-child>`,
imports: [ChildComponent], // ← standalone を直接 import. これだけで良い
})
export class ParentComponent {}
standalone コンポーネントのルーティング
今回追加したのは DesignPatternBaseComponent と StatePatternClientComponent の2つです。
URL は以下のように構成します。
/design-pattern/state-pattern-client
ポイント
-
DesignPatternBaseComponentが親コンポーネント - その配下に
StatePatternClientComponentを子ルートとして配置 -
FeatureDesignPatternModuleをforChildルーティングで定義し、最終的にFeatureAllPageRoutingModuleで集約
FeatureDesignPatternModule
@NgModule({
// standalone コンポーネントは NgModule の imports に直接指定できる（v14+）
imports: [
RouterModule.forChild([{
path: '',
component: DesignPatternBaseComponent,
children: [{ path: 'state-pattern-client', component: StatePatternClientComponent }],
}]),
DesignPatternBaseComponent,
StatePatternClientComponent,
],
exports: [RouterModule],
})
export class FeatureDesignPatternModule {}
NgModule の imports に standalone コンポーネントを直接指定することで、モジュール経由でもルーティングやテンプレートでの利用が可能になります。v14 以降で正式にサポートされた機能です。
FeatureAllPageRoutingModule
これを FeatureAllPageRoutingModule に組み込みます。
const ROUTE_TABLE: Routes = [
{
path: 'design-pattern',
loadChildren: () => import('./feature-design-pattern.module').then((m) => m.FeatureDesignPatternModule),
},
];
@NgModule({
declarations: [ReadmeComponent],
imports: [RouterModule.forRoot(ROUTE_TABLE)],
exports: [ReadmeComponent, RouterModule],
})
export class FeatureAllPageRoutingModule {}
AppModule
そして FeatureAllPageRoutingModule は AppModule に登録します。
※ ここは 非standalone コンポーネントの構成から変わりはありません。
@NgModule({
declarations: [AppComponent],
bootstrap: [AppComponent],
imports: [
FeatureAllPageRoutingModule,
],
})
export class AppModule {}
こうして /design-pattern でベース、/design-pattern/state-pattern-client で子コンポーネントが表示されるようになります。
standalone コンポーネントと 非standalone コンポーネントを共存させた構成
AppModule
├── FeatureAllPageRoutingModule
│ ├── 非standalone: TabModule → TabComponent
│ └── standalone: FeatureDesignPatternModule → FeatureDesignPatternModule → StatePatternClientComponent
まとめ
- Angular v19 以降、CLI で生成されるコンポーネントはデフォルトで standalone になる
-
非standalone コンポーネント は従来通り
@NgModule経由で利用可能 -
standalone コンポーネント は
importsに追加するだけで利用可能（NgModule不要） - ルーティングは
forChildを用いて standalone と非standalone を同居させられる - 段階的に standalone へ移行することで、既存資産を活かしつつ新しい開発スタイルを取り入れられる
ソースコード
今回の記事で扱ったコードは こちら にあります。
ご興味あればご参照ください。