Can't bind to 'formGroup' since it isn't a known property of 'form' but formmodule exist in shared module

Question

I'm building a login form for a project. I want the form to redirect to the dashboard if the inputted data passes the authentication, But i'm currently experiencing issues with the formgroup. formmodule and reactiveformmodule has been imported in the shared module which is used by both the app module and the dashboard module. FormGroup works in the dashboard module but shows

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

when used in the login component located in app module
Below is the snippet to the code.

Login Component

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/services/auth/auth.service';
import { TokenService } from 'src/app/services/token/token.service';
import { MessageService } from 'primeng/api';
import { Login } from '../login/login';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  loginForm = new FormGroup({
    username: new FormControl('', Validators.required),
    password: new FormControl('', Validators.required)
  });


  submitted: boolean = false;

  constructor(
    private fb: FormBuilder, 
    private authService: AuthService, 
    private router: Router, 
    private token: TokenService,  
    private messageService: MessageService) { }

  ngOnInit(): void {
  }


  login(): void {
    console.log(this.loginForm.value)


    const username = this.loginForm.controls['username'].value;
    const password = this.loginForm.controls['password'].value;

    //  //attempting to login 
     this.authService.login(username,password).subscribe(
        res => {
            if(res.status !== 200) {
              this.showToast('error', 'Error', 'User Auth failed');
            }

            if(res.status === 200) {
              this.showToast('success', 'Success', 'User Auth Successful');
              this.router.navigate(['/app'])
            }
            
        }
    );
  }

  showToast(severity: string, summary: string, detail: string) {
    this.messageService.add({severity: severity, summary: summary, detail: detail});
  }


}

  <form [formGroup]="loginForm" method="post" >
                    
                                                    <div class="mb-3">
                                                        <input type="text" class="form-control" id="username" formControlName="username"  placeholder="Enter username">
                                                    </div>
                            
                                                    <div class="mb-3">
                                                   
                                                        <div class="position-relative auth-pass-inputgroup mb-3">
                                                            <input type="password" class="form-control pe-5" formControlName="password" placeholder="Enter password" id="password-input">
                                                     
                                                        </div>
                                                    </div>
                                                    
                                                    <div class="mt-3">
                                                        <input class="p-button w-100 d-flex justify-content-center" (onClick)="login()" style="padding: 10px!important" type="submit" value="signin" >
                                                    </div>
                        
                
                                                </form>

SharedModule

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

import { BreadcrumbComponent } from '../shared/components/breadcrumb/breadcrumb.component';
import { ButtonComponent } from '../shared/components/button/button.component';
import { DialogComponent } from '../shared/components/dialog/dialog.component';
import { FooterComponent } from '../shared/components/footer/footer.component';
import { MenuitemComponent } from '../shared/components/menuitem/menuitem.component';
import { SidenavComponent } from '../shared/components/sidenav/sidenav.component';
import { TableComponent } from '../shared/components/table/table.component';
import { TopnavComponent } from '../shared/components/topnav/topnav.component';
import { DialogModule} from 'primeng/dialog';
import { TableModule} from 'primeng/table';
import { ButtonModule } from 'primeng/button';
import { StarterComponent } from './components/starter/starter.component';
import { Router, RouterModule } from '@angular/router';
import {TabViewModule} from 'primeng/tabview';
import {ProgressBarModule} from 'primeng/progressbar';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { InteceptorService } from '../inteceptor/inteceptor.service';
import { NgProgressModule } from 'ngx-progressbar';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DynamicFormComponent } from './components/dynamic-form/dynamic-form.component';
import { DynamicFormQuestionComponent } from './components/dynamic-form-question/dynamic-form-question.component';
import { TokenService } from '../services/token/token.service';
import { AuthService } from '../services/auth/auth.service';
import {ToastModule} from 'primeng/toast';
import { MessageService } from 'primeng/api';
import { LoadingbarComponent } from './components/loadingbar/loadingbar.component';
import { ToastsComponent } from './components/toasts/toasts.component';

@NgModule({
  declarations: [
    BreadcrumbComponent,
    ButtonComponent,
    DialogComponent,
    FooterComponent,
    MenuitemComponent,
    SidenavComponent,
    TableComponent,
    TopnavComponent,
    StarterComponent,
    DynamicFormComponent,
    DynamicFormQuestionComponent,
    LoadingbarComponent,
    ToastsComponent,
  ],
  imports: [
    CommonModule,
    DialogModule,
    TableModule,
    ButtonModule,
    RouterModule,
    TabViewModule,
    ProgressBarModule,
    NgProgressModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    ToastModule,
  ],
  providers: [
    AuthService,
    TokenService,
    MessageService
  ],
  exports: [
    ButtonComponent,
    DialogComponent,
    FooterComponent,
    MenuitemComponent,
    SidenavComponent,
    TableComponent,
    TopnavComponent,
    DialogModule,
    TableModule,
    ButtonModule,
    StarterComponent,
    BreadcrumbComponent,
    CommonModule,
    ProgressBarModule,
    NgProgressModule,
    FormsModule,
    ReactiveFormsModule,
    DynamicFormComponent,
    HttpClientModule,
    ToastModule,
    LoadingbarComponent,
    ToastsComponent
  ]
})

export class SharedModule { }

App Module

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { SharedModule } from '../app/shared/shared.module';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { InteceptorService } from '../app/inteceptor/inteceptor.service';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    AppRoutingModule,
    SharedModule,
    BrowserModule,
    BrowserAnimationsModule,
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: InteceptorService, multi: true}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Dashboard module

import { NgModule } from '@angular/core';
import { SharedModule } from '../../shared/shared.module';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ClientindexComponent } from './clientindex/clientindex.component';
import { ShipindexComponent } from './shipindex/shipindex.component';
import { RaftindexComponent } from './raftindex/raftindex.component';
import { CylinderindexComponent } from './cylinderindex/cylinderindex.component';
import { AssessmentindexComponent } from './assessmentindex/assessmentindex.component';
import { AssessmentlogindexComponent } from './assessmentlogindex/assessmentlogindex.component';
import { ItemsindexComponent } from './itemsindex/itemsindex.component';
import { AssessmentcreateComponent } from './assessmentcreate/assessmentcreate.component';
import { AssessmentlogcreateComponent } from './assessmentlogcreate/assessmentlogcreate.component';
import { AssessmentlogeditComponent } from './assessmentlogedit/assessmentlogedit.component';
import { AssessmentlogviewComponent } from './assessmentlogview/assessmentlogview.component';
import { AssessmenteditComponent } from './assessmentedit/assessmentedit.component';
import { AssessmentviewComponent } from './assessmentview/assessmentview.component';
import { ClientviewComponent } from './clientview/clientview.component';
import { ClientraftComponent } from './clientraft/clientraft.component';
import { InvoicesindexComponent } from './invoicesindex/invoicesindex.component';
import { PoindexComponent } from './poindex/poindex.component';
import { WaybillindexComponent } from './waybillindex/waybillindex.component';
import { CertificateindexComponent } from './certificateindex/certificateindex.component';

@NgModule({
  declarations: [

  
    DashboardComponent,
        ClientindexComponent,
        ShipindexComponent,
        RaftindexComponent,
        CylinderindexComponent,
        AssessmentindexComponent,
        AssessmentlogindexComponent,
        ItemsindexComponent,
        AssessmentcreateComponent,
        AssessmentlogcreateComponent,
        AssessmentlogeditComponent,
        AssessmentlogviewComponent,
        AssessmenteditComponent,
        AssessmentviewComponent,
        ClientviewComponent,
        ClientraftComponent,
        InvoicesindexComponent,
        PoindexComponent,
        WaybillindexComponent,
        CertificateindexComponent
  ],
  imports: [
    DashboardRoutingModule,
    SharedModule,
  ]
})
export class DashboardModule { }