Why do any of the Angular imports are not working?

I just se tup a project, and it is compiling succesfully, but every time I try to add a directive, it shows this error, for example for [formGroup]: "Property formGroup is not provided by any applicable directives nor by form element". But if I try ngModel or *ngIf, none of them are working.

I tried reinstalling everything, deleted node_modules, reinstalled it, created a new project, tried it there. Pulled a project from github and configured it, it compiles, but still not recognizes any of the modules. I have imported every necessary module to the app.module.ts and still not working. I followed step by step everything on tutorials, tried at least 3 tutorial videos and 7 articles, but no success at all.

This is my app module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule} from "@angular/forms";
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from "@angular/material/button";
import {MatDividerModule} from "@angular/material/divider";
import { initializeApp,provideFirebaseApp } from '@angular/fire/app';
import { environment } from '../environments/environment';
import { provideAuth,getAuth } from '@angular/fire/auth';
import { provideFirestore,getFirestore } from '@angular/fire/firestore';
import { AngularFireModule } from "@angular/fire/compat";
import { OverviewComponent } from './overview/overview.component';

@NgModule({
declarations: [AppComponent, LoginComponent, OverviewComponent],
imports: [
BrowserModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
BrowserAnimationsModule,
MatFormFieldModule,
MatInputModule,
MatButtonModule,
MatDividerModule,
FormsModule,
ReactiveFormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAuth(() => getAuth()),
provideFirestore(() => getFirestore())
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}


this my login template:

<h4 class="text-center m-3">Login</h4>
<div class="form-container">
<form [formGroup]="loginForm">
<input required />
<input required type="password" />
<button>Login</button>
</form>
</div>
<h4 class="text-center m-3">Register</h4>
<div class="form-container">
<input required />
<input required type="password" />
<input required type="password" />
<button>Register</button>
</div>


this is my login ts file:

import {Component, OnInit} from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from "@angular/forms";

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

loginForm: FormGroup;

constructor(private fb: FormBuilder) {}

ngOnInit(): void {
this.loginForm = this.fb.group({
email: new FormControl(''),
password: new FormControl('')
})
}

}


The error is in the template as it says to the [formGroup]: Property formGroup is not provided by any applicable directives nor by form element

Continue reading...