error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.

Which @angular/* package(s) are the source of the bug?

Don’t known / other

Is this a regression?

No

Description

I’m getting following error Error: projects/my-lib/src/lib/my-lib.component.html:1:7 - error NG8002: Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’. After running ng test command although I import ReactiveFormsModule in TestBed.configureTestingModule method. Steps to reproduce:

1. git clone https://github.com/arekgotfryd/minimal-reproduction
2. cd minimal-reproduction
3. npm i
4. ng test

Please provide a link to a minimal reproduction of the bug

https://github.com/arekgotfryd/minimal-reproduction

Please provide the exception or error you saw

Error: projects/my-lib/src/lib/my-lib.component.html:1:7 - error NG8002: Can't bind to 'formGroup' since it isn't a known property of 'form'.

1 <form [formGroup]="linkingForm">
        ~~~~~~~~~~~~~~~~~~~~~~~~~

  projects/my-lib/src/lib/my-lib.component.ts:6:16
    6   templateUrl: './my-lib.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component MyLibComponent.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 11.2.18
Node: 14.18.2
OS: win32 x64

Angular: 11.2.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.18
@angular-devkit/build-angular   0.1102.18
@angular-devkit/core            11.2.18
@angular-devkit/schematics      11.2.18
@angular/cli                    11.2.18
@schematics/angular             11.2.18
@schematics/update              0.1102.18
ng-packagr                      11.2.4
rxjs                            6.6.7
typescript                      4.1.6
webpack                         4.19.1

Anything else?

Link to screenshot from terminal: Screenshot

[JoostK]

This happens because you’re using a custom Webpack configuration from within your Karma configuration file. The Webpack configuration registers AngularCompilerPlugin, which runs the AOT compiler on the production code. This is why you get type-checking of production code.

In your spec compilation unit however, only src/test.ts and **/**.spec.ts files are included (according to tsconfig.spec.json. The my-lib.component.spec.ts file imports my-lib.component.ts but that’s where the import chain ends; there is no import into my-lib.module.ts in any of the source files that are part of the testing program. Hence, regardless of whether MyLibModule actually imports ReactiveFormsModule or not the actual MyLibComponent component does not have a corresponding NgModule that declares it, at least it’s not seen by the compiler.

The testing module is entirely irrelevant here, as TestBed uses JIT compilation and testing modules are not visible to the AOT compiler.

There are a couple of options to get this to work. I’d recommend that you move away from the custom Webpack configuration in your Karma setup, because without it the CLI will run your tests in JIT mode entirely.

With the custom Webpack config, you can pass skipCodeGeneration: true as an option for AngularCompilerPlugin. Please be aware that AngularCompilerPlugin has been replaced with AngularWebpackPlugin since v12 and the former is no longer available. I believe the new option would be jitMode: true.

Another alternative could be to add src/public-api.ts to the files array in tsconfig.spec.json, as then you’ll find that MyLibModule becomes part of the compilation unit at which point it can import ReactiveFormsModule to fix the error (which is an actual problem in your production code; this import is vital for things to work).

I’m going to close this since the issue is specific to your custom Webpack setup and this is otherwise working as expected.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}