Angularのmoduleとstandalone

以下の記事を参考にしてAngularを勉強していると、app.moduleなどが出てきたが、src/app以下にそのようファイルは存在しない

どうやら、
最近のAngularプロジェクトでは、Angular 14以降の新しいバージョンでStandalone Componentsという新しい概念が導入され、従来のモジュール（app.module.ts）を使用しない構造のプロジェクトも作成可能になったようです。以下に、それぞれのケースについて詳しく説明します。

1. Standalone Componentsを使用したプロジェクト

• Angularの最近のバージョン（Angular 14以降）では、Standalone Componentsの概念が追加されており、これによりモジュール（NgModule）を使わずにアプリケーションを構築することが可能になりました。
• この場合、app.module.tsは必須ではなく、代わりに各コンポーネントに必要な依存を直接インポートする形で、独立した（standalone）構造を持つことができます。

2. モジュールベースとスタンドアロンベースの違い

• モジュールベースの構造:

  • 以前のAngularのデフォルトのやり方では、各コンポーネントは一つのモジュールに依存しており、アプリ全体の設定を行うためにapp.module.tsが使われていました。
  • app.module.tsでNgModuleの設定をし、アプリ内で使用するモジュール（BrowserModule、AngularFireModuleなど）をまとめて管理していました。

• スタンドアロンベースの構造:

  • Standalone Componentsを使うと、各コンポーネントが独自に必要なモジュールを直接取り込むことができます。そのため、app.module.tsのような集中管理のモジュールファイルは不要です。
  • この構造では、アプリケーションのメインファイルとしてapp.component.tsや、設定ファイルとしてapp.config.tsが使われます。

4. 既存プロジェクトにモジュールを追加する方法

• もし、従来のNgModuleベースの構造を使いたい場合、以下の手順で手動でapp.module.tsを追加することができます：

  1. app.module.tsを作成：

     • src/appディレクトリ内にapp.module.tsファイルを新規作成します。

  2. 基本的なモジュール設定を記述：

     • 以下のコードはfirebase導入時の例

     import { BrowserModule } from '@angular/platform-browser';
     import { NgModule } from '@angular/core';
     import { AppComponent } from './app.component';
     import { AngularFireModule } from '@angular/fire';
     import { AngularFireAnalyticsModule } from '@angular/fire/analytics';
     import { AngularFirestoreModule } from '@angular/fire/firestore';
     import { environment } from '../environments/environment';
     
     @NgModule({
       declarations: [AppComponent],
       imports: [
         BrowserModule,
         AngularFireModule.initializeApp(environment.firebase),
         AngularFireAnalyticsModule,
         AngularFirestoreModule,
       ],
       providers: [],
       bootstrap: [AppComponent],
     })
     export class AppModule {}
     

  3. main.tsでモジュールを指定：

     • src/main.tsで、AppModuleを使ってアプリをブートストラップします。

     import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
     import { AppModule } from './app/app.module';
     
     platformBrowserDynamic().bootstrapModule(AppModule)
       .catch(err => console.error(err));
     

まとめ

• app.module.tsが存在しない場合、Angularの新しい構造であるStandalone Componentsが使われている可能性が高いです。この場合、アプリ全体の設定はapp.config.tsなどを使用して行います。
• app.module.tsを使用した従来の構造が必要であれば、手動でファイルを作成してNgModuleを定義することが可能です。
• Firebaseの設定は、新しいStandalone Componentsのスタイルであればapp.config.ts内で行い、従来のNgModuleベースであればapp.module.tsで設定します。

プロジェクトのニーズに応じて、どちらの方法を選択するか決めていくらしいです。最近のAngularプロジェクトではスタンドアロンの方法も推奨されていルようですが、従来のモジュール構造もまだ多くのプロジェクトで利用されています。