Error: Type ****Component is part of the declarations of 2 modulesの解消 -共有モジュールの作成

この記事の内容

前回の記事のようにコンポーネントを複数のモジュールのdeclarationsに記述する方法でコンポーネントの親子関係を構築すると、記事タイトルのエラーが発生してしまいます。

エラー内容.

HeaderComponent is part of the declarations of 2 modules: Tab1PageModule and Tab2PageModule! Please consider moving HeaderComponent to a higher module that imports Tab1PageModule and Tab2PageModule. You can also create a new NgModule that exports and includes HeaderComponent then import that NgModule in Tab1PageModule and Tab2PageModule.

今回はこのエラーを解消するためにコンポーネントの共通化の方法を書いていきます。
Ionicという部品のライブラリを使用しますが書いている内容はAngularです。

参考ページ

• Angular公式 - Sharing Modules
• Qiita - AngularのNgModuleを使って、アプリの構成を管理する

#環境

• Angular8.0
• Ionic4.0
• IonicCLIを導入済み

具体的に

モジュールのTSファイルに記述するdeclationsはモジュールに属するコンポーネントなどを記述しますが、コンポーネントが所属するモジュールは１つまでのため下のような構成はできません。

---

エラーメッセージに記載されているように共有で使用したいコンポーネントを新しい共有用モジュール（SharedModule）に取り込み、使用したいモジュールにインポートすることで解消することができます。
具体的には共有モジュールを作成し、共通で使用したいコンポーネントを共有モジュールのdeclationsに記述することで、どのモジュールからもコンポーネントのカスタムタグを使用することができます。

共有モジュールの生成

IonicCLIのジェネレート機能を使って共有モジュールを生成します。

ionic start myApp tabs

ionic generate
? What would you like to generate? module
? Name/path of module: shared

共有用のモジュールが作成できたので、このモジュールにコンポーネントを登録していきます。sharedフォルダに使用するコンポーネントを生成します。

ionic generate
? What would you like to generate? component
? Name/path of component: shared/component/sample-shared

sharedフォルダ配下にshared-componentのファイル一式が作成されます。
せっかくなので、Ionicのカスタムタグを使用してみます。

sample-shared.component.html

<ion-label>
  sample-shared works!
</ion-label>

生成したshared-componentを共有モジュールに追加します。Ionicのカスタムタグをモジュール内で使用しているため、Ionic部品をインポートしておきます。
コンポーネントを外部で利用するためにexportに記述します。

shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { SampleSharedComponent } from './component/sample-shared/sample-shared.component';


@NgModule({
  declarations: [SampleSharedComponent], // 共有するコンポーネントを追加
  imports: [
    CommonModule, 
    IonicModule // モジュール内でIonic部品を使用するためにインポート
  ], 
  exports: [
    SampleSharedComponent //共有するコンポーネントを追加
  ]
})
export class SharedModule { }

共有モジュールの利用

共有モジュールを使用したいモジュールでSharedModuleをimportantsに加えます。

tab1.module.ts

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: Tab1Page }]),
    SharedModule
  ],
  declarations: [Tab1Page]
})

これで共有するコンポーネントのカスタムタグが利用できるようになります。

tab1.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Tab One
    </ion-title>
  </ion-toolbar>
</ion-header>
<!-- カスタムタグの利用-->
<app-sample-shared></app-sample-shared>

最終的にAuguryのNgModuleの状態はこんな感じ。
declationsにSampleSharedModuleを記述したSharedModuleを各ページのモジュールにインポートしています。

#共に働くWebエンジニアを募集しています!
不動産SHOPナカジツでは自社サービスを作っていく仲間を募集しています。
詳しくはWantedlyからお問い合わせください。