【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
Author And Source
この問題について(【Angular】SharedModuleを作る), 我々は、より多くの情報をここで見つけました https://qiita.com/frtklog/items/eccb245f5ca51d7d0374著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .