angular - Cannot read properties of null (reading 'addFormGroup'), Cannot read properties of null (reading 'getFormGroup')

Question

I am getting the following error when using ReactiveFormsModule in lazy loaded sub module. After importing the ReactiveFormsModule I gut the error and if I removed it I gut error NG8002: Can't bind to 'formGroup' since it isn't a known.

What I'm missing.

and here is my AppModule

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { LoginComponent } from './views/security/login/login.component';
import { P500Component } from './views/errorPages/p500/p500.component';
import { P404Component } from './views/errorPages/p404/p404.component';
import { HttpClientModule, HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
import { SchedulerComponent } from './views/scheduler/scheduler/scheduler.component';
import { AuthorizationCheck } from './views/security/login/authorizationCheck';
import { LayoutComponent } from './containers/layout/layout.component';
import { NavbarComponent } from './containers/navbar/navbar.component';
import { SidebarComponent } from './containers/sidebar/sidebar.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { FullCalendarModule } from '@fullcalendar/angular';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';
import interactionPlugin from '@fullcalendar/interaction';
import resourceTimeGridPlugin from '@fullcalendar/resource-timegrid';
import { httpInterceptor } from './interceptor/httpInterceptor';
import {
  DevExtremeModule,
  DxButtonModule, DxCheckBoxModule,
  DxDataGridModule, DxDateBoxModule, DxDropDownBoxModule, DxNumberBoxModule, DxPopupModule,
  DxSelectBoxModule,
  DxValidatorModule,
  DxValidationSummaryModule
} from 'devextreme-angular';
import dxPopup from 'devextreme/ui/popup';
import { TitleCasePipComponent } from './pipes/title-case-pip/title-case-pip.component';
import { AutofocusDirective } from './directives/autofocus.directive';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { ReportsComponent } from './views/reports/reports/reports.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

FullCalendarModule.registerPlugins([
  dayGridPlugin,
  timeGridPlugin,
  listPlugin,
  resourceTimeGridPlugin,
  interactionPlugin
])

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    P500Component,
    P404Component,
    SchedulerComponent,
    LayoutComponent,
    NavbarComponent,
    SidebarComponent,
    TitleCasePipComponent,
    AutofocusDirective,
    ReportsComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    FullCalendarModule,
    AppRoutingModule,
    HttpClientModule,
    FontAwesomeModule,
    FontAwesomeModule,
    HttpClientModule,
    BrowserAnimationsModule,
    DxButtonModule,
    DxDataGridModule,
    DxPopupModule,
    DxNumberBoxModule,
    DxDateBoxModule,
    DxSelectBoxModule,
    DxValidatorModule,
    DxValidationSummaryModule,
    DxDropDownBoxModule,
    DxCheckBoxModule,
    DevExtremeModule,
    BsDropdownModule.forRoot(),
    AccordionModule.forRoot(),
    TabsModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (HttpLoaderFactory),
        deps: [HttpClient]
      }
    }),
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: httpInterceptor, multi: true },
    AuthorizationCheck],
  bootstrap: [AppComponent]
})
export class AppModule { }

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

SharedModule

import { NgModule } from '@angular/core';


import { DevExtremeModule,
   DxButtonModule, DxCheckBoxModule,
    DxDataGridModule, DxDateBoxModule, DxDropDownBoxModule, DxNumberBoxModule, DxPopupModule, 
    DxSelectBoxModule, 
    DxValidatorModule,
    DxValidationSummaryModule
   } from 'devextreme-angular';
import {  TranslateModule } from '@ngx-translate/core';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';


@NgModule({
  imports: [
    CommonModule,
    TranslateModule.forChild({})
  ],
  declarations: [
  ],
  exports:[
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    DxButtonModule,
    DxDataGridModule,
    DxPopupModule,
    DxNumberBoxModule,
    DxDateBoxModule,
    DxSelectBoxModule,
    DxValidatorModule,
    DxValidationSummaryModule,
    DxDropDownBoxModule,
    DxCheckBoxModule,
    DevExtremeModule,
    TranslateModule
    
  ]
})
export class SharedModule { }

SecurityModule the sub module

import { NgModule } from '@angular/core';
import { SharedModule } from '../../shared/shared.module';
import { RolesComponent } from './roles/roles.component';
import { SecurityRoutingModule } from './security-routing.module';
import { UsersComponent } from './users/users.component';
import { UserFormComponent } from './users/user-form/user-form.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    SharedModule,
    SecurityRoutingModule,
  ],
  declarations: [
      UsersComponent,
      RolesComponent,
      UserFormComponent
],
exports:[
],
  providers:[
  ]
})
export class SecurityModule
 { }

标签： angularangular-reactive-formsangular-formsangular11