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

Question

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.

Answer 1

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 { }