Issue with importing reactive forms in a module which does not have routing in Angular 11 app

I have created Angular 11 app and added a shared module in it. This shared module exports FormsModule and ReactiveFormsModule which are used by other modules. The lazy loaded modules(which have routing) and use forms import this shared module and everything works fine. But I have a module which contains a modal component. The idea is to use this modal across multiple modules in my app. This modal also has a form in it. When I import the shared module into this modal module, the ReactiveForms doesn’t work and throws an error shown below.

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

The code in shared.module.ts is

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

 @NgModule({
   declarations: [
   ],
   imports: [
     CommonModule,
   ],
   exports: [
     FormsModule,
     ReactiveFormsModule
   ]
 })
 export class SharedModule { }

The code in modal.module.ts is

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

import { ModalComponent } from './modal.component';
import { SharedModule } from '../../shared.module';

@NgModule({
   declarations: [ModalComponent],
   imports: [
     CommonModule,
     SharedModule
   ]
})
export class ModalModule { }

The above modal module doesn’t have routing since it is a modal. I don’t know why the error is thrown only for this module. Please help me out with this issue.

Source: Angular Questions