2

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

AVB
  • 21
  • 2

1 Answers1

0

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/

ACS Software
  • 1