Can't bind to ngModel since it isn't a known property of input error

I have imported FormsModule in the module.ts but still compilation is failing with error - can't bind to 'ngModel' since it isn't a known property of input.

Note: I encountered the error after I created separate modules for each of the component in project. Initially there were no error with single module.ts

I am a beginner in angular and am unable to find the issue here, any help would be appreciated.

Component Code:

import { Component } from '@angular/core';
import{Customer}from"./CustomerApp.model";
import {FormsModule} from "@angular/forms";
@Component({
templateUrl: './CustomerApp.CustomerView.html'
//styleUrls: ['./app.component.css']
})
export class CustomerComponent {
title = 'custApp';
CustomerModel:Customer =new Customer();
CustomerModels:Array<Customer> = new Array<Customer>();
Add(){
this.CustomerModels.push(this.CustomerModel);
this.CustomerModel = new Customer(); //clear Ui
}
}


CustomerModule.ts -

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import {RouterModule} from "@angular/router";
import { MainRoutes } from '../Routing/CustomerApp.MainRouting';
import { CustomerComponent } from './CustomerApp.CustomerComponent';
import {FormsModule} from "@angular/forms";
@NgModule({
declarations: [
CustomerComponent
],
imports: [
RouterModule.forRoot(MainRoutes),
CommonModule,FormsModule
],
providers: [],
bootstrap: [CustomerComponent]
})
export class CustomerModule { }


main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { MainModule } from './CustomerApp/Home/CustomerApp.MainModule';
import { environment } from './environments/environment';

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(MainModule)
.catch(err => console.log(err));


CustomerView.html

Customer Code:


<input [(ngModel)] ="CustomerModel.CustomerCode" type="text"/><br/>
Customer Name: <input [(ngModel)] ="CustomerModel.CustomerName" type ="text"/><br/>
Customer Amount: <input [(ngModel)] ="CustomerModel.CustomerAmount" type="number"/><br/>
<input (click) = "Add()" type =button value="Add"/><br/>

{{CustomerModel.CustomerCode}}<br/>
{{CustomerModel.CustomerName}}<br/>
{{CustomerModel.CustomerAmount}}<br/>

<table>
<tr>
<td>Customer Code</td>
<td>Customer Name</td>
<td>Customer Amount</td>
</tr>
<tr *ngFor ="let cust of CustomerModels">
<td>{{cust.CustomerCode}}</td>
<td>{{cust.CustomerName}}</td>
<td>{{cust.CustomerAmount}}</td>
</tr>
</table>


model.ts

export class Customer{
CustomerCode:string="";
CustomerName:string="";
CustomerAmount:number=0;
}



Project Folder structure is below -

Error screenshot -

-- EDIT - Added other 2 module.ts files -

CustomerApp.MainModule.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule} from "@angular/router";
import { MasterPageComponent } from './CustomerApp.MasterPageComponent';
import { HomeComponent } from './CustomerApp.HomeComponent';
import { MainRoutes } from '../Routing/CustomerApp.MainRouting';
@NgModule({
declarations: [
MasterPageComponent,
HomeComponent
],
imports: [
RouterModule.forRoot(MainRoutes),
BrowserModule
],
providers: [],
bootstrap: [MasterPageComponent]
})
export class MainModule { }


CustomerApp.SupplierModule.ts


import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import {RouterModule} from "@angular/router";
import { MainRoutes } from '../Routing/CustomerApp.MainRouting';
import { SupplierComponent } from './CustomerApp.SupplierComponent';
//import { SupplierRoutes } from '../Routing/CustomerApp.SuplierRouting';

@NgModule({
declarations: [
SupplierComponent
],
imports: [
RouterModule.forRoot(MainRoutes),
CommonModule
],
providers: [],
bootstrap: [SupplierComponent]
})
export class SupplierModule { }

Continue reading...