Angular 4 cannot see value accessor when the component is from foreign module

Question

I got two npm packages: components and app . The components one is supposed to contain reusable components to be used across multiple apps. I want some of the components to play well with NgModule.

I've got a test control defined like that:

/// COMPONENTS PACKAGE

export const VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => TestControlComponent),
  multi: true
};

@Component({
  selector: 'test-control',
  templateUrl: './test-control.component.html',
  styleUrls: ['./test-control.component.scss'],
  providers: [ VALUE_ACCESSOR ]
})
export class TestControlComponent implements OnInit, ControlValueAccessor { ... }

TestControlComponent has all interface elements but no-op (I skipped them for brevity).

And in the module it is exported like that:

@NgModule({
  imports: [
  ],
  declarations: [
    TestControlComponent
  ],
  exports: [
   TestControlComponent
  ]
})
export class ComponentModule {}

And it is consumed like so:

// APP PACKAGE

app.module.ts:

import { ComponentModule } from '@company/components';
import { FormsModule } form '@angular/forms'

@NgModule({
   imports: [ FormsModule, ComponentModule ],
   ...
})

And then the usage in some component that is declared in app.module.ts:

<form #testForm="ngForm">
  <test-control name="name" [(ngModel)]=""></test-control>
</form>

This results in app compiling but at runtime it throws core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: No value accessor for form control with name: 'test' Error: No value accessor for form control with name: 'test' and the imported control stops working. If I copy the control to the app package and declare it in app.module.ts - everything works.

The value accessor is there, do you have any idea why Angular cannot recognize this?

Answer 1

Can you try importing the FormsModule as well to the imports: [] array of ComponentModule declaration? It seems like the ngModel attribute used in the <test-control></test-control> tags which is part of the ComponentModule doesn't have the required modules imported for it to work. (Actually meant to add as a comment but SO wouldn't let me yet).