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?