Angular4 Exception: Can't bind to 'ngClass' since it isn't a known property of 'input'

In my project I'm using lazy loading So, In my registration module I'm using [ngClass] directive to add invalid class when formGroup has some validation errors on my registration form. but my code throws an exception when trying to add [ngClass] directive on my form.

Can't bind to 'ngClass' since it isn't a known property of 'input'
​

While investigating the error itself i came to several solutions, like adding the 'directive: [NgStyle]' to the component, but this does not solve the problem.

Here is my code:

register.router.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RegisterComponent } from "app/modules/register/register.component";


const routes: Routes = [
{
path: '', pathMatch: 'full',
component: RegisterComponent
}
];

@NgModule({
imports: [
RouterModule.forChild(routes),
FormsModule,
ReactiveFormsModule
],
declarations: [RegisterComponent],
exports: [RouterModule]
})
export class RegisterRouter { }


register.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RegisterRouter } from './register.router';


@NgModule({
imports: [
CommonModule,
RegisterRouter
],
declarations: []
})
export class RegisterModule { }


register.component.ts

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

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

//#region Declarations
UserForm: FormGroup;
inValid: boolean = false;
//#endregion

constructor(
private _fb: FormBuilder) {
this.UserForm = _fb.group({
"_firstname" : ['', Validators.required]
});
}
}


register.component.html

<input type="text" class="form-control" [ngClass]="{'ahinValid': inValid}" id="txtFirst_Name" aria-describedby="ariaFirstName" placeholder="Enter First Name"
name="_firstname" [formControl]="UserForm.controls['_firstname']">


Thank you for your help.

Continue reading...