FormGroup not a known property in Angular does not fire on a newly created view

Question

I'm getting some very interesting behavior in Angular today, something I have not experienced before, hoping someone here can help me spot why I'm getting the dreaded 'Can't bind to 'formGroup' since it isn't a known property of 'form'.' when I should not be getting this.

Here is my scenario.

-> pages
   -> analysis
      -> cycles
         -> review
            -> review.component.ts
         cycles.module.ts

My navigation looks like the above. I have a module under 'cycles', and is the module for all pages under cycles.

I have a shared module, called 'shared.module.ts', from within which I export both FormsModule and ReactiveFormsModule. Take into account, on another page, this works without issue.

In cycles.module.ts, I import 'shared.module.ts'.

With this in place, in this particular navigation, I get the dreaded error.

I thought I'd then, just to test that FormsModule and ReactiveFormsModule is loaded correctly, removed the shared.module.ts and imported both FormsModule and ReactiveFormsModule in cycles.module.ts.

Still nothing.

Then I decided, that, since this does not work, and I import both FormsModule and ReactiveFormsModule in app.module.ts, it should be picked up globally, righ?

Nothing.

I don't want to create a module per page, but if that's what I need to do, then so be it.

Has anyone else seen a scenario like this?

** Update 1 **

None of my custom components render on this particular page. I've tried, apart from [formGroup], to render one of my other controls, and it generates the same error.

I would appear that somewhere, something has gone wrong. Have deleted the newly created views and routes, will start from scratch and see if I can reproduce.

JadedEric JadedEric · Accepted Answer · 2020-08-10T17:48:02

I found the problem.

I had two components, each with a module, named exactly the same, at two (2) different levels within the pages hierarchy:

pages
  -> analysis
       -> cycles
           -> module
  -> cycles
      -> module

What I had no realized, is that I inadvertently referenced the module from the top-level cycles folder, and not the one under the analysis folder.

ID 10 T

FormGroup not a known property in Angular does not fire on a newly created view

1 Answers