【Angular】SharedModuleを作る

AngularMaterial使ってると
app.moduleにMaterialのモジュールのimportが沢山あってごちゃごちゃしてくるので
別モジュールに分けて読み込んでapp.moduleをスッキリさせたい

整理する前のapp.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { ReactiveFormsModule, FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MatInputModule } from "@angular/material/input";
import { MatButtonModule } from "@angular/material/button";
import { MatDatepickerModule } from "@angular/material/datepicker";
import { MatNativeDateModule } from "@angular/material/core";

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormsModule,
    BrowserAnimationsModule,
    MatInputModule,
    MatButtonModule,
    MatDatepickerModule,
    MatNativeDateModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

コマンドを使ってモジュールを作るよ

ng g module shared --module=app

--module=appを書くとapp.module.tsにsharedモジュールの設定を勝手に追加してくれる。

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { BrowserModule } from "@angular/platform-browser";
import { ReactiveFormsModule, FormsModule } from "@angular/forms";

import { MatInputModule } from "@angular/material/input";
import { MatButtonModule } from "@angular/material/button";
import { MatDatepickerModule } from "@angular/material/datepicker";
import { MatNativeDateModule } from "@angular/material/core";

@NgModule({
  declarations: [],
  imports: [],
  exports: [
    BrowserAnimationsModule,
    BrowserModule,
    CommonModule,
    FormsModule,
    MatButtonModule,
    MatDatepickerModule,
    MatInputModule,
    MatNativeDateModule,
    ReactiveFormsModule,
  ],
})
export class SharedModule {}

全てのコンポーネントで共通して使いたいモジュールをshared.moduleに書き写します
書き写したものはapp.moduleから削除してOK
ポイントはimportsではなくexportsに書くこと。

整理した後のapp.module

import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";
import { SharedModule } from "./shared/shared.module";
@NgModule({
  declarations: [AppComponent],
  imports: [SharedModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

とってもスッキリ。

importとかexportについてはここ
NgModuleのFAQ