Angular 16 Can't bind to 'ng*'(ngClass, ngStyle, ngSwitch) since it isn't a known property of 'div'

Question

I recently migrated to Angular 16 a business used application. After migration I have received error Can't bind to 'ngClass' since it isn't a known property of 'div'. The error is a compilation error which doesn't allow the application to run.

I tried to isolate the issue and I have arrived creating 2 new projects (ng new project). One on Angular 15 and one on Angular 16. The one in Angular 15 is working without any error but the one on 16 has an error. Template contains <div class="terminal" [ngSwitch]="selection.value"> which is marked as an error (directive) NgSwitch Can't bind to 'ngSwitch' since it isn't a known property of 'div'.ngtsc(-998002) app.component.ts(2, 26): Error occurs in the template of component AppComponent

In this case the application compiles (I mean the ng new project with basic app.component template) but the error is still showed in Visual studio under Terminal, tab Problems.

This error is not present in Angular 15. To update to Angular 16, I have executed following command: sudo npm uninstall -g @angular/cli sudo npm install -g @angular/cli And to go back to 15: sudo npm uninstall -g @angular/cli sudo npm install -g @angular/cli@15

Below the package.json for the application (ng new project) that is not working: { "name": "project", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "^16.1.0", "@angular/common": "^16.1.0", "@angular/compiler": "^16.1.0", "@angular/core": "^16.1.0", "@angular/forms": "^16.1.0", "@angular/platform-browser": "^16.1.0", "@angular/platform-browser-dynamic": "^16.1.0", "@angular/router": "^16.1.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.13.0" }, "devDependencies": { "@angular-devkit/build-angular": "^16.1.1", "@angular/cli": "~16.1.1", "@angular/compiler-cli": "^16.1.0", "@types/jasmine": "~4.3.0", "jasmine-core": "~4.6.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "typescript": "~5.1.3" } }

and this one is for the application that is (ng new project) working { "name": "project", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "^15.2.0", "@angular/common": "^15.2.0", "@angular/compiler": "^15.2.0", "@angular/core": "^15.2.0", "@angular/forms": "^15.2.0", "@angular/platform-browser": "^15.2.0", "@angular/platform-browser-dynamic": "^15.2.0", "@angular/router": "^15.2.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.12.0" }, "devDependencies": { "@angular-devkit/build-angular": "^15.2.8", "@angular/cli": "~15.2.8", "@angular/compiler-cli": "^15.2.0", "@types/jasmine": "~4.3.0", "jasmine-core": "~4.5.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.0.0", "typescript": "~4.9.4" } }

Answer 1

In my case this error message was at the bottom of the error output. The top of the error messages was not visible since it scrolled off the screen. I had to send the error to a file to find what the issue was. The error was that after upgrading to angular 16 many third party libraries that don't support Ivy broke the modules into which they were imported. Then components in such modules or modules importing the broken modules were not compiling correctly ( with errors like ngClass is not found ).

Answer 2

In order to remove strict type warnings or errors make sure to set “strict”: false and "strictTemplates": false under compilerOptions and angularCompilerOptions properties in tsconfig.json file.

Ref: https://www.positronx.io/angular-ngclass-and-ngstyle-explained/