Upgrade angular 15 to 16 but got errors

Question

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"

},

Answer 1

Check if your standalone components are importing the required modules. If the issue still persists,

First switch back to 15.2.0 or later version and migrate the project into standalone components before transferring into 16.

After moving into 15.2.0 or later version with a successful ng serve. Run this in the terminal:

ng generate @angular/core:standalone

Once done, remove any NgModule declarations and Run unit tests and fix any failures. Use code formatters, if the project uses automatic formatting. Then run any linters in your project and fix warnings.

After the above process, you will have to Convert declarations to standalone, Remove unnecessary NgModules and Switch to standalone bootstrapping API. You should run these migrations in the following order:

1. Convert declarations to standalone
2. Remove unnecessary NgModules
3. Switch to standalone bootstrapping API

Still there might be some common problems and limitations which you will be able to resolve by analysing tsconfig.json

If the ng 15.2.0+ project runs successfully in the standalone component mode. Then you will not get the above error after migrating into 16.

For your reference:

Updated angular to v16, now mat components (e.g. mat-icon) cannot be found and is an unknown element?

https://angular.io/guide/standalone-migration#migrate-an-existing-angular-project-to-standalone

Answer 2

After inspection, I noticed that you are trying to use Angular Material in the AboutAppComponent, however, I do not see Angular Material as a dependency in your package.json.

You can add the dependency by running the command ng add @angular/material or by adding "@angular/material": "^16.2.10" directly to your package.json and running npm install.

Hope this helps.