Angular Ivy: Can't bind to 'formGroup' since it isn't a known property of 'form'. However ReactiveFormsModule and FormsModule is imported

Question

I am currently stumped on how to resolve this issue. As I have discovered from many other posts , the usual fix for this problem is to import ReactiveFormsModule and FormsModule into app.module.ts

I have even included it within the other sub-modules that use reactive forms ( OrganisationFormComponent and TeamFormComponent ). However I see the errors shown below within my Visual Studio Code terminal.

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

...twice for seperate components. See : Errors In Console Screenshot

I have also tried to replace

[formGroup]=

to

formGroup=

but no luck here.

The current errors wont allow my form to submit correctly and therefore not write to the Firebase back end.

The GitHub Repo can be found here for further analysis : https://github.com/joeserve/CRUD-Project

OrganisationFormComponent

<div>
<h1>{{ !organisationId ? "Create Organisation" : "Edit Organisation" }}</h1>
<form [formGroup]="organisationForm" (submit)="onSubmit()">
    <div class="form-group">
        <label>Name</label>
        <input type="text" formControlName="name" class="form-control" maxlength="20">
    </div>
    <button type="submit">Save</button>
</form>

TeamFormComponent

<div>
<h1>{{ !teamId ? "Create Team" : "Edit Team" }}</h1>
<form [formGroup]="teamForm" (submit)="onSubmit()">
    <div class="form-group">
        <label>Name</label>
        <input type="text" formControlName="name" class="form-control" maxlength="20">
    </div>
    <button type="submit">Save</button>
</form>

OrganisationModule

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { OrganisationFormComponent } from './organisation-form/organisation-form.component';
import { OrganisationRoutingModule } from './organisation-routing.module';
import { OrganisationComponent } from './organisation.component';

@NgModule({
declarations: [OrganisationComponent,OrganisationFormComponent],
exports: [OrganisationComponent,OrganisationFormComponent],
imports:[
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule ,
    OrganisationRoutingModule,
    BrowserModule],
})
export class OrganisationModule{}
    

TeamModule

import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from "@angular/core";
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { TeamFormComponent } from './team-form/team-form.component';
import { TeamRoutingModule } from './team-routing.module';
import { TeamComponent } from './team.component';
@NgModule({
declarations: [TeamComponent,TeamFormComponent],
exports: [TeamComponent,TeamFormComponent],
imports:[
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    RouterModule ,
    TeamRoutingModule,
    BrowserModule],
})
export class TeamModule{}

app.module.ts

@NgModule({
 declarations: [
   AppComponent,
   FleetComponent,
   UnitComponent,
   AgentComponent,
   HomeComponent,
   TeamComponent,
   StaffComponent,
   LoginComponent,
],
 imports: [
   BrowserModule,
   FormsModule, 
   ReactiveFormsModule,
   HttpClientModule,
   CommonModule,
   RouterModule, 
   AngularFireModule.initializeApp(environment.firebaseConfig),
   AngularFirestoreModule,
   AngularFireDatabaseModule,
   appRoutingModule,
 ],
providers: [
    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },

    // provider used to create fake backend
    fakeBackendProvider, <-- Not relevant
    OrganisationService,
    TeamService
],
bootstrap: [AppComponent]
})
export class AppModule { }

I apologise for any excessive snippets or info that I present in my question

Information Update:

I'm lazy loading in two modules within the app:

app.routing.ts

 path: 'organisation', loadChildren: () => import('./organisation/organisation-routing.module').then(m => m.OrganisationRoutingModule) 

organisation-routing.module.ts

path: ':organisationId/teams', loadChildren: () => import('./team/team-routing.module').then(m => m.TeamRoutingModule) 

Could this be a source of the problem?

Answer 1

The issue here is that you're pointing to wrong modules in lazy loaded routes:

app.routing.ts

{
  path: 'organisation',
  loadChildren: () => import('./organisation/organisation-routing.module')
                              .then(m => m.OrganisationRoutingModule) 
}

should be:

{
  path: 'organisation',
  loadChildren: () => import('./organisation/organisation.module')
                                   .then(m => m.OrganisationModule)
}

organisation-routing.module.ts

{
  path: ':organisationId/teams',
  loadChildren: () => import('./team/team-routing.module').then(m => m.TeamRoutingModule)
},

should be

{
  path: ':organisationId/teams',
  loadChildren: () => import('./team/team.module').then(m => m.TeamModule)
},