declarations、providers、imports の概要

2024-04-02

Angularにおけるdeclarations、providers、importsの違い

declarationsプロパティは、モジュール内で使用するコンポーネント、ディレクティブ、パイプなどのコンポーネントクラスを指定します。これらのコンポーネントは、モジュール内でテンプレートとして使用することができ、他のモジュールからインポートすることもできます。

例:

@NgModule({
  declarations: [
    MyComponent,
    MyDirective,
    MyPipe
  ],
  ...
})
export class MyModule {}

この例では、MyComponent、MyDirective、MyPipeという3つのコンポーネントクラスがMyModuleモジュール内で使用されます。

providersプロパティは、モジュール内で使用するサービスやその他の依存関係を指定します。これらのサービスは、モジュール内のコンポーネントや他のサービスによって注入されます。

@NgModule({
  providers: [
    MyService,
    {
      provide: OtherService,
      useClass: MyOtherService
    }
  ],
  ...
})
export class MyModule {}

この例では、MyServiceというサービスと、OtherServiceという抽象クラスに対するカスタム実装であるMyOtherServiceがMyModuleモジュール内で提供されます。

importsプロパティは、他のモジュールからインポートするコンポーネント、サービス、モジュールなどの機能を指定します。これらの機能は、モジュール内で直接使用することができます。

@NgModule({
  imports: [
    CommonModule,
    MyOtherModule
  ],
  ...
})
export class MyModule {}

この例では、CommonModuleとMyOtherModuleという2つのモジュールがMyModuleモジュールにインポートされます。

declarations、providers、importsは、Angularアプリケーションにおけるモジュールの構成要素を定義するために使用されます。それぞれの役割は以下の通りです。

declarations: モジュール内で使用するコンポーネント、ディレクティブ、パイプなどを指定します。
providers: モジュール内で使用するサービスやその他の依存関係を指定します。
imports: 他のモジュールからインポートする機能を指定します。

これらのプロパティを理解することで、Angularアプリケーションをより効率的に構成することができます。

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MyComponent } from './my-component/my-component.component';
import { MyService } from './my-service/my-service.service';

@NgModule({
  declarations: [
    AppComponent,
    MyComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    MyService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

my-component.component.ts

import { Component, OnInit } from '@angular/core';
import { MyService } from '../my-service/my-service.service';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  constructor(private myService: MyService) { }

  ngOnInit() {
    this.myService.doSomething();
  }

}

my-service.service.ts

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

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

  constructor() { }

  doSomething() {
    console.log('MyService.doSomething() called');
  }

}

このサンプルコードでは、以下のような構成になっています。

AppComponentは、アプリケーションのメインコンポーネントです。
MyComponentは、MyModule内で使用されるコンポーネントです。
MyServiceは、MyModule内で提供されるサービスです。
BrowserModuleは、Angularアプリケーションに必要な基本的な機能を提供するモジュールです。

declarationsプロパティは、AppComponentとMyComponentという2つのコンポーネントをMyModule内で使用することを指定しています。

providersプロパティは、MyServiceというサービスをMyModule内で提供することを指定しています。

importsプロパティは、BrowserModuleをMyModuleにインポートすることを指定しています。

このサンプルコードを実行すると、コンソールにMyService.doSomething() calledというメッセージが表示されます。

Angularにおけるdeclarations、providers、importsの代替方法

コンポーネント、ディレクティブ、パイプなどを直接@NgModuleデコレータのテンプレートに記述する。

@NgModule({
  template: `
    <my-component></my-component>
  `
})
export class MyModule {}

コンポーネント、ディレクティブ、パイプなどを個別のファイルに記述し、entryComponentsプロパティで指定する。

@NgModule({
  entryComponents: [
    MyComponent
  ]
})
export class MyModule {}

@NgModule({
  template: `
    <my-component [service]="myService"></my-component>
  `,
  providers: [
    MyService
  ]
})
export class MyModule {}

サービスなどを個別のファイルに記述し、forRootメソッドを使用してモジュールに登録する。

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

  constructor() { }

}

@NgModule({
  imports: [
    MyService.forRoot()
  ]
})
export class MyModule {}

@NgModule({
  template: `
    <my-component></my-component>
  `,
  imports: [
    MyOtherModule
  ]
})
export class MyModule {}

モジュールなどを個別のファイルに記述し、loadChildrenプロパティを使用して遅延ロードする。

@NgModule({
  imports: [
    RouterModule.forChild({
      loadChildren: () => import('./my-other-module').then(m => m.MyOtherModule)
    })
  ]
})
export class MyModule {}