ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

Question

So, I was working with a light and dark theme in angular project, through mat-slide-toggle I am switching theme with a service storing the theme isDark boolean as Behavioral Subject. I have two 2 modules that are lazy-loaded 1 for the home page and the other for the 404 error page as shown:

app.module.ts

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NavModule } from '@shared/nav/nav.module'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, NavModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

app-routing.module.ts

 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: 'classify', }, { path: 'classify', loadChildren: () => import('./feature/classify/classify-routing.module').then( m => m.ClassifyRoutingModule) }, { path: '**', loadChildren: () => import('./feature/not-found/not-found-routing.module').then( m => m.NotFoundRoutingModule) } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

classify.module.ts

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ClassifyRoutingModule } from './classify-routing.module'; import { ClassifyComponent } from './classify.component'; @NgModule({ declarations: [ClassifyComponent], imports: [ CommonModule, ClassifyRoutingModule ], exports: [ClassifyComponent] }) export class ClassifyModule { }

classify.component.html

 <div class="classify-container"> <div class="pattern" [ngClass]="{ 'dark': isDark}"> </div> </div>

classify.component.ts

 import { Component, OnInit, OnDestroy } from '@angular/core'; import { AppSettingsService } from '@core/service/app-settings.service'; import { SubSink } from 'subsink'; @Component({ selector: 'app-classify', templateUrl: './classify.component.html', styleUrls: ['./classify.component.scss'] }) export class ClassifyComponent implements OnInit, OnDestroy { isDark = false; subs = new SubSink(); constructor(private conf: AppSettingsService){ this.subs.sink = this.conf.darkMode.subscribe( value => { this.isDark = value; }); } ngOnInit(): void { } ngOnDestroy(): void{ this.subs.unsubscribe(); } }

app-setting.service.ts

 import { Injectable } from '@angular/core'; import { DeviceDetectorService } from 'ngx-device-detector'; import { BehaviorSubject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class AppSettingsService { mobile = false; darkMode: BehaviorSubject<boolean>; theme: string | null; constructor(private detector: DeviceDetectorService) { this.mobile = this.detector.isMobile(); this.theme = localStorage.getItem('theme'); if (.this.theme){ this;theme = 'light'. localStorage,setItem('theme'. this;theme). } if (this.theme == 'light'){ this;darkMode = new BehaviorSubject<boolean>(false). } else{ this;darkMode = new BehaviorSubject<boolean>(true): } } private changeTheme(theme. string){ this;theme = theme. localStorage,setItem('theme'; theme): } toggleDarkMode(). void{ if (this.theme == 'light'){ this.darkMode;next(true). this;changeTheme('dark'). } else{ this.darkMode;next(false). this;changeTheme('light') ; } } }

Now in my scss file for light theme div.pattern has a background image and if I toggle theme then the dark class containing another background image must change the div background but on compiling the angular app. It's giving me an error that ngClass is not a known property. Please help with this issue as I have both browse Module and common module imported in their respective locations.

package.json

 { "name": "project", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~11.0.3", "@angular/cdk": "^11.0.2", "@angular/common": "~11.0.3", "@angular/compiler": "~11.0.3", "@angular/core": "~11.0.3", "@angular/forms": "~11.0.3", "@angular/material": "^11.0.2", "@angular/platform-browser": "~11.0.3", "@angular/platform-browser-dynamic": "~11.0.3", "@angular/router": "~11.0.3", "ngx-device-detector": "^2.0.4", "rxjs": "~6.6.0", "subsink": "^1.0.2", "tslib": "^2.0.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1100.3", "@angular/cli": "~11.0.3", "@angular/compiler-cli": "~11.0.3", "@types/jasmine": "~3.6.0", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~5.1.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~4.0.2" } }

screenshot:

app.component.html

 <div class="container mat-app-background" [ngClass]="{ 'dark-theme': isDarkTheme }"> <app-nav></app-nav> <div class="load-overlay" *ngIf="isLoading"> <div class="loader"></div> </div> <router-outlet></router-outlet> </div>

Update 1 : Added app-setting service, package.json, screenshot (variable name was changed here)

Update 2 : Also want to share that App.component.html has the same ngClass for toggling the dark theme but it's working perfectly

Answer 1

So, I was revisiting my code(nearly wasted 4hours to find cause of issue) and apparently adding ClassifyComponent to App.module's declarations array (other code remained same) removed the error and was working perfectly. Can anyone explain why is this happening?