[SOLVED] Transitive module import statements

Issue

In my Angular 6 application, I have the app.module.ts file which imports a custom module:

import { AppGuiModule } from './app-gui.module';
...
imports: [
  AppGuiModule,

In turn, the app-gui.module file imports the form modules:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
imports: [
  FormsModule,
  ReactiveFormsModule,

I thought that would be enough to use the [(ngModel)] form element.

But alas, that’s not the case, and it gives me the error:

Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
  <div>
    <label>name:
      <input [ERROR ->][(ngModel)]="user.name" placeholder="name"/>
    </label>
  </div>
"): ng:///AppModule/[email protected]:13

Only if I also import the form modules from within the app.module.ts file, does the application load fine:

import { AppGuiModule } from './app-gui.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
imports: [
  FormsModule,
  ReactiveFormsModule,
  AppGuiModule,

Should I group all GUI related import statements in one module ?

Is there any way to achieve some transitive imports ?

Solution

I could solve the issue, indeed doing it in a transitive way like I was hoping to do. The thing that I was missing was having the form modules listed in the exports block of the AppGuiModule module.

Here is some pseudo source code:

The AppGuiModule module:

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
  ],
  imports: [
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  exports: [
    FormsModule,
    ReactiveFormsModule,
  ]
})
export class AppGuiModule { }

The AppModule module:

import { MaterialModule } from './material.module';

@NgModule({
  imports: [
    AppGuiModule,
  ],
})
export class AppModule { }

Answered By – Stephane

Answer Checked By – Marie Seifert (BugsFixing Admin)