Why do any of the Angular imports are not working?

Question

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

Answer 1

As per documentation CommonModule required to use built in directives.

Do import like this: import { CommonModule } from '@angular/common';

And in AppModule in imports array put CommonModule in the first place.