Angular Child Module

cannot bind ngModel in child module

um [(ngModel)] in Child Modulen zu verwenden braucht es den Import von FormsModule in dem Child-Module.

// trinket.module.ts
import {FormsModule} from '@angular/forms';
@NgModule({
  imports: [
    CommonModule,
    TrinketRoutingModule,
    FormsModule
  ],
  declarations: [
    TrinketSearchComponent
  exports: [
    TrinketSearchComponent // TrinketSearchComponent soll auch ausserhalb vom TrinketModule verwendet werden
  ],
  providers: [
  ],
})
export class TrinketModule {
}

use component from parent module

Components kann man nicht einfach in app.module.ts bei ‚exports‘ hin schreiben und dann in Child Modulen verwenden. Grund ist, dass die Child Modules die Components aus dem Parent Module nicht erben, auch wenn sie in dem Parent Module bei ‚exports‘ drin steht.

Lösung: man erstellt ein Shared-Module. Das ist ein gewöhnliches Module mit Zeug drin. Hier können wir deklarierte Components bei ‚exports‘ hin schreiben. Dieses Modul können wir in unser Child Module importieren (auch bei ‚imports‘ hin schreiben) und somit deren Components verwenden.

HTTP Client – HttpClientModule

Um mit Angular Requests zu machen, braucht es das HttpClientModule – bzw. in einem Service den HttpClient.

Import HttpClientModule in der root AppModule Klasse:

import { HttpClientModule } from '@angular/common/http';

…und packe es zu den imports:

imports: [
  HttpClientModule,
  BrowserModule,
  AppRoutingModule,
  MyFirstModule, MySecondModule
],