Can't bind to 'formGroup' since it isn't a known property of 'form' whilst using SharedModule - angular-reactive-forms

Question

I've had this error lots of times and I've always been able to fix it but I think I'm overlooking something this time and I can't get it too work.
As stated in the title, the error I get is Can't bind to 'formGroup' since it isn't a known property of 'form'. for the following line of code: <form [formGroup]="contactSettings">.
I already checked all stackoverflow posts but they all come down to add the ReactiveFormsModule to the module that makes use of ReactiveForms. In my case, which was also in various stackoverflow posts, I should export the ReactiveFormsModule in my SharedModule and import that SharedModule in my ContactModule that actually uses the ReactiveFormsModule. I don't see what I'm doing wrong.
contact-settings.component.html
<form [formGroup]="contactSettings">
</form>
contact-settings.component.ts
export class ContactSettingsComponent extends FormComponent {
contactSettings: FormGroup = this.fb.group({ //Moving this to constructor or onInit does not fix it
firstName: ["First name"],
lastName: ["Last name"],
emailAdress: ["email", Validators.email],
gender: ["male"],
parentCustomerId: ["Parent customer name"],
language: ["Language"],
telephone: ["Telephone number"],
mobilephone: ["Mobile phone number"],
});
constructor(private fb: FormBuilder, private contactService: ContactService) {
super();
}
}
contact.module.ts
... //imports
#NgModule({
declarations: [
ContactSettingsComponent
],
imports: [
ContactRoutingModule,
SharedMaterialModule, // <--- contains export ReactiveFormsModule and FormsModule
SharedComponentsModule
]
})
export class ContactModule { }
shared-material.module.ts
... //Angular Material imports
//CommonModule
import { CommonModule } from "#angular/common";
//Forms
import { ReactiveFormsModule, FormsModule } from "#angular/forms";
//Browser
import { BrowserAnimationsModule } from "#angular/platform-browser/animations";
import { BrowserModule } from "#angular/platform-browser";
#NgModule({
//Normally imports are here, but the template I bought does not have this and adding it doesn't fix it either. It worked normally before.
exports: [
//CommonModule
CommonModule,
//Browser animations
BrowserModule,
BrowserAnimationsModule,
//Forms
ReactiveFormsModule, // <--- clearly present here
FormsModule,
//Angular Material Modules
...
]
})
export class SharedMaterialModule {}

Answer 1

My imports were done perfectly. The problem was that my ContactModule was never used in any other module. I had to add load the ContactModule by adding the following code block to my app-routing.module.
{
path: 'contact',
loadChildren: () => import('./views/contact/contact.module').then(m => m.ContactModule)
}