After migrating Angular version 15 to 16 facing issue of more components and material...

After migrating Angular from version 15 to 16, user-created components and Material components are throwing the following errors:

error NG8001: 'component-name' is not a known element(both material components and user-created components)

error NG8002: Can't bind to 'ngClass' since it isn't a known property of 'div'.

error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'textarea'.

error NG8002: Can't bind to 'showCustomerFeedback' since it isn't a known property of 'app-session-properties'.

error NG8002: Can't bind to 'dataSource' since it isn't a known property of 'table'.

error NG8003: No directive found with exportAs 'matMenu'.

error NG8004: No pipe found with name 'date'.

I have configured the app.module.ts file as per the documentation, but these issues persist for all Material and user-created components.

Could you please provide a solution for these issues?

Environment:

Angular CLI: 16.0.0
Node: 18.20.5
Package Manager: npm 10.8.2
OS: darwin arm64

Angular: 16.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... fire, forms, language-service, material, platform-browser
... platform-browser-dynamic, router

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1600.0
@angular-devkit/build-angular 16.0.0
@angular-devkit/core 16.0.0
@angular-devkit/schematics 16.0.0
@schematics/angular 16.0.0
rxjs 6.6.7
typescript 5.0.4


Package.json

"dependencies": {
"@angular-material-components/datetime-picker": "^16.0.1",
"@angular-material-components/moment-adapter": "^16.0.1",
"@angular/animations": "16.0.0",
"@angular/cdk": "16.0.0",
"@angular/common": "16.0.0",
"@angular/compiler": "16.0.0",
"@angular/core": "16.0.0",
"@angular/fire": "^16.0.0",
"@angular/forms": "16.0.0",
"@angular/material": "16.0.0",
"@angular/platform-browser": "16.0.0",
"@angular/platform-browser-dynamic": "16.0.0",
"@angular/router": "16.0.0",
"@splunk/otel-web": "^0.19.3",
"1password-cli": "^0.2.1",
"ag-grid-angular": "32.0.1",
"ag-grid-community": "32.0.1",
"angular-shepherd": "16.0.0",
"aws-iot-device-sdk-v2": "^1.9.0",
"aws-sdk": "^2.1279.0",
"crypto-js": "~4.2.0",
"firebase": "~9.8.1",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"ng-lint-staged": "^12.0.4",
"ngx-cookie-service": "16.0.0",
"ngx-spinner": "~16.0.2",
"openvidu-angular": "2.30.0",
"openvidu-browser": "2.30.0",
"process": "^0.11.10",
"redux-observable": "^2.0.0",
"rxjs": "~6.6.7",
"tslib": "~2.0.0",
"util": "^0.12.4",
"zone.js": "~0.13.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "16.0.0",
"@angular-eslint/builder": "16.0.0",
"@angular-eslint/eslint-plugin": "16.0.0",
"@angular-eslint/eslint-plugin-template": "16.0.0",
"@angular-eslint/schematics": "16.0.0",
"@angular-eslint/template-parser": "16.0.0",
"@angular/cli": "16.0.0",
"@angular/compiler-cli": "16.0.0",
"@angular/language-service": "16.0.0",
"@commitlint/cli": "^17.1.2",
"@commitlint/config-conventional": "^17.1.0",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~12.11.1",
"@typescript-eslint/eslint-plugin": "^5.59.2",
"@typescript-eslint/parser": "^5.59.2",
"cypress": "~13.0.0",
"eslint": "^8.39.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-unused-imports": "^2.0.0",
"husky": "^8.0.1",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.5.0",
"karma-junit-reporter": "~2.0.1",
"lint-staged": "^13.0.3",
"prettier": "^2.7.1",
"prettier-eslint": "^15.0.1",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"typescript": "~5.0.4"
},


Need to fix the above issue while run ng serve

Continue reading...