Upgrade angular 15 to 16 but got errors

I have upgrade the following before update Node to 18.18.0, NPM to 10.2.3 typescript to 4.9.5

After that upgrade the @angualar/cli@16 --force for the existed project.

But got following errors

the error list is long, but the most of the errors are same

Error: src/app/app.component.html:2:1 - error NG8001: 'router-outlet' is not a known element:
If 'router-outlet' is an Angular component, then verify that it is part of this module.
If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

<router-outlet></router-outlet>

~~~~~~~~~~~~~~~

src/app/app.component.ts:20:15
20 templateUrl: './app.component.html',
~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AppComponent.


Error: src/app/views/pages/about-app/about-app.component.html:1:1 - error NG8001: 'mat-card' is not a known element:
If 'mat-card' is an Angular component, then verify that it is part of this module.
If 'mat-card' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

1 <mat-card class="head">
~~~~~~~~~~~~~~~~~~~~~~~

src/app/views/pages/about-app/about-app.component.ts:6:18
6 templateUrl: './about-app.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component AboutAppComponent.


I tried to add routerModule in the component as per some suggestions from stackoverflow also i tried added CUSTOM_ELEMENTS_SCHEMA in NgModule.schemas

Here is the package.json list

"dependencies": {
"@angular/animations": "^16.2.11",
"@angular/cdk": "^16.2.10",
"@angular/common": "^16.2.11",
"@angular/compiler": "^16.2.11",
"@angular/core": "^16.2.11",
"@angular/elements": "^16.2.11",
"@angular/forms": "^16.2.11",
"@angular/platform-browser": "^16.2.11",
"@angular/platform-browser-dynamic": "^16.2.11",
"@angular/platform-server": "^16.2.11",
"@angular/router": "^16.2.11",
"@asymmetrik/ngx-leaflet": "^16.0.1",
"@azure/msal-angular": "^3.0.6",
"@azure/msal-browser": "^3.3.0",
"@ng-bootstrap/ng-bootstrap": "^15.1.2",
"@ngrx/effects": "^16.3.0",
"@ngrx/entity": "^16.3.0",
"@ngrx/router-store": "^16.3.0",
"@ngrx/store": "^16.3.0",
"@ngrx/store-devtools": "^16.3.0",
"@ngx-loading-bar/core": "^6.0.2",
"@ngx-translate/core": "^15.0.0",
"@popperjs/core": "^2.11.6",
"@types/chart.js": "^2.7.55",
"angular-in-memory-web-api": "^0.16.0",
"apexcharts": "^3.40.0",
"autoprefixer": "^10.4.14",
"chart.js": "^4.4.0",
"chartist": "^1.3.0",
"core-js": "^3.33.1",
"crypto-js": "^4.1.1",
"d3": "^7.8.5",
"d3-selection-multi": "1.0.1",
"file-saver": "^2.0.5",
"hammerjs": "^2.0.8",
"highlight.js": "^11.8.0",
"html2canvas": "^1.0.0-rc.5",
"leaflet": "^1.9.4",
"lodash": "^4.17.11",
"lodash-es": "^4.17.11",
"material-design-icons": "^3.0.1",
"mathjs": "^12.0.0",
"moment": "^2.29.4",
"msal": "^1.4.18",
"ng-apexcharts": "^1.7.6",
"ng-inline-svg": "^13.1.1",
"ngrx-store-freeze": "^0.2.4",
"ngx-clipboard": "^16.0.0",
"ngx-csv": "^0.3.1",
"ngx-daterangepicker-material": "^6.0.4",
"ngx-highlightjs": "^10.0.0",
"ngx-pagination": "^6.0.3",
"ngx-perfect-scrollbar": "^10.1.1",
"ngx-permissions": "^16.0.1",
"object-path": "^0.11.4",
"rxjs": "^7.8.1",
"tslib": "^2.5.2",
"xlsx": "^0.18.5",
"zone.js": "^0.14.1"


},

Continue reading...