2

Problem

In my application I'm having a SharedModule which declares all components and directives used in multiple modules throught the whole app.

As I decided to use reactive forms (instead of template-driven forms) in all my forms throught the whole application, I decided to import ReactiveFormsModule in SharedModule to import it only once and make it available to all my feature modules. The interesting part is that I don't re-export ReactiveFormsModule.

shared.module.ts

(...)
import { ReactiveFormsModule } from '@angular/forms';
(...)

@NgModule({
  imports: [
    (...),
    ReactiveFormsModule,
    (...)
   ],

   declarations: [
     (...)
   ],

   exports: [
     // ReactiveFormsModule is not re-exported here!
     (...)
   ],
}
export class SharedModule {}

In my app I have a UsersModule which imports SharedModule and declares UsersAddComponent:

users.module.ts

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    UsersRoutingModule,
  ],
  declarations: [
    UsersRootComponent,
    UsersAddComponent,
    UsersIndexComponent,
  ],
})
export class UsersModule {}

users-add.component.html

(...)
<!-- Name -->
<npc-form-control-text
  [label]="'name' | translate"
  [formControl]="name"
>
</npc-form-control-text>
(...)

It works. And that surprises me! Quoting Angular NgModules documentation:

Declarations are private by default. If this module does not export UserComponent, then only the components within this module can use UserComponent.

Importing a module does not automatically re-export the imported module's imports. Module 'B' can't use ngIf just because it imported module 'A' which imported CommonModule. Module 'B' must import CommonModule itself.

So as UsersModule doesn't import ReactiveFormsModule directly - it only imports SharedModule which imports ReactiveFormsModule but does not export it - it shouldn't have access to FormControlDirective. But it does, it all works. And as soon as I remove ReactiveFormsModule from SharedModule imports array, it stops working producing error:

Error: Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. ("
  <input
    [type]="type"
    [ERROR ->][formControl]="formControl"
    class="FormControl-input"
  />
"): ng:///SharedModule/FormControlTextComponent.html@10:4

Question

Why I don't need to re-export ReactiveFormsModules in SharedModule for UsersModule components being able to use FormControlDirective?

1
  • Good spot! My overlook :). Post it as an answer and I'll accept it. Commented Oct 17, 2018 at 14:16

1 Answer 1

1

Angular always shows a hint of what is going on:

ng:///SharedModule/FormControlTextComponent.html@10:4
      ^^^^^^^^^^^^

As we can see your FormControlTextComponent is declared in SharedModule and that's why removing ReactiveFormsModule from SharedModule breaks this component.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.