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.

Since RegisterComponent was declared in RegisterRouter(what's the name for module?) module then you have to import CommonModule there:

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    FormsModule,
    ReactiveFormsModule,
    CommonModule      <================== this line
  ],
  declarations: [
    RegisterComponent // this component wants to have access to built-in directives
  ],
  exports: [RouterModule]
})
export class RegisterRouter { }

For anyone who's still having these issue even after importing CommonModule

I had a library that I just could not get to compile. I had several modules.. which were importing other smaller/components:

One of the components in one of my smaller modules had [ngClass] in it.. it would cause lib to not compile and throw Can't bind to 'ngClass' since it isn't a known property of 'div'

Apparently... i was exporting all my components for that modules... but not the module itself in the public-api.ts file (the module that did the import of CommonModule):

export * from './lib/af-layout/af-layout.module'; // <==== THAT WAS MISSING
export * from './lib/af-layout/components/af-layout-header/af-layout-header.component';

It took me a long time to find that.. as the error was directing me towards CommonModule not being imported.. not that an export was missing.

Other than the Common Module being included in the imports of the parent module (e.g. app.module) , also ensure that the component that is raising the issue is actually included in the declarations of the parent module.

Lazy Loading Share module issue common solution:

> Both module must import CommonModule

In shared module:

@NgModule({
  imports: [CommonModule],
  ...
})

Module where you want to use component:

@NgModule({
  imports: [CommonModule, ...],
  ...
})

You need to import commonModule

@NgModule({
  imports: [CommonModule],
  ...
})

Adding the Common module didn't work for me either. Adding my Component to its module's "declarations" worked perfectly.

Reference - https://www.javaer101.com/en/article/42275629.html

Import your component into the declations of @ngModuls of anyName.module.ts file.

I had this error and it was because I had an error in the module file, I uninstalled a module and forgot to remove it from my imports array.

Apparently if one import has an error it affects the whole module class.

So check for red lines in your module files if nothing else seems to work

I had the same error.

Turns out it came after I moved a newly generated component from one folder to another. That move messed up the app.module.ts file.

I fixed the broken path, restarted ng serve, and voilà: Problem solved.

Hope this helps someone else, as I looked for solutions for hours and went through a complete npm re-install process, and more before stumbling on to this solution.

I blame my IDE for not informing me about the error in the app.module file, but ultimately this was caused by my own lazyness.

In my case it didn't require the CommonModule import. I had just typed [ngclass] instead of [ngClass]. I guess its case sensitive and it needed the capital "C", instead of "c".

i was facing with it, and solved it with

npm install