Kategorien
Angular

Shared Module

Um Komponenten in Angular wiederverwenden zu können, ist es früher oder später notwendig ein „shared Module“ zu erstellen. Grundsätzlich eine ganz einfach Aufgabe.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TagsComponent } from './tags/tags.component';
import { IonicModule } from '@ionic/angular';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
  declarations: [TagsComponent],
  imports: [
    CommonModule,
    IonicModule,
    ReactiveFormsModule
  ],
  exports: [TagsComponent, IonicModule, ReactiveFormsModule]
})
export class SharedModule { }

Hier am Beispiel einer Komponente zur Erstellung von Tags in einem Formular in Ionic4.
Wichtig dabei ist, unter imports auch alle von der Komponente benötigten Module zu importieren und auch unter exports wieder zu exportieren.

Jetzt muss das shared-Module nur noch im gewünschten „Zielmodul“ importiert werden und die Komponente kann verwendet werden.
Sind in einem Shared Module mehrere Komponenten enthalten, bietet sich an bei declarations und exports den Spread-Operator zu verwenden um doppelte Schreibarbeit zu vermeiden.

const modules = [TagsComponent]
.
.
.
@NgModule({
  declarations: [...modules],
  imports: [
    CommonModule,
    IonicModule,
    ReactiveFormsModule
  ],
  exports: [...modules, IonicModule, ReactiveFormsModule]
})
.
.
.