Can't bind to [(ngModel)] since it is not provided by any applicable directives

Issue

I just started to study Angular and wanted to try to implement 2 way binding.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'sample text';
}

app.component.html

<input type="text" [(ngModel)]="title">
<p>{{title}}</p>

This code runs and works as it should, but for some reason in the IDE (I am using WebStorm) I get this error:

P.S. Yes, I read the topics related to this error, but all the answers say just import FormsModule, and I did it anyway.

P.P.S I noticed that IDE was working fine before running the ng serve command.

Solution

I had this issue with webstorm today as well after performing an Angular version update (from 10->12). Angular 12 uses a newer Typescript version which I believe caused this error in the IDE. Updating to the latest webstorm version fixed it for me.

Answered By - fieora