While updating the angular from 10 to 12, I was following all the steps which are already written here
https://update.angular.io/?l=3&v=10.0-12.0
However after doing all these steps properly, here are the errors I am getting:
An unhandled exception occurred: Must use import to load ES Module:
/home/../angular/node_modules/@angular/compiler-cli/bundles/index.js
require() of ES modules is not supported.
require() of /home/../angular/node_modules/@angular/compiler-cli/bundles/index.js from /home/../angular/node_modules/@angular-devkit/build-angular/src/webpack/configs/common.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/../angular/node_modules/@angular/compiler-cli/package.json.
I could not understand how to fix it. I tried to remove "type": "module" from /home/../angular/node_modules/@angular/compiler-cli/package.json but it did not solve my problem.
I will so glad if someone helps me solve this issue
Solved problem by
ng update -- to update angular for the local project
open package.json to change all the angular items in "dependencies" and "devDependencies" from 12 to 13 ex:
"dependencies": {
"@angular/animations": "~13.1.1",
"@angular/cdk": "^13.1.1",
"@angular/common": "~13.1.1",
"@angular/compiler": "~13.1.1",
"@angular/core": "~13.1.1",
"@angular/forms": "~13.1.1",
"@angular/material": "^13.1.1",
"@angular/platform-browser": "~13.1.1",
"@angular/platform-browser-dynamic": "~13.1.1",
"@angular/router": "~13.1.1",
}
"devDependencies": {
"@angular-devkit/build-angular": "~13.1.1",
"@angular/cli": "~13.1.1",
"@angular/compiler-cli": "~13.1.1",
"typescript": "~4.5.4"
}
npm install
All done
I faced the same issue while upgrading my application's angular version to 13 from 12. I missed updating the package ng-packagr to its latest. After updating the ng-packagr
Version I used: "ng-packagr": "~13.3.1"
Make sure your workspace is tidy and try the below command. This could resolve your problem.
# Step 1: Update your cli
npm i -g @angular/cli
# Step 2: Migrate your workspace cli
ng update @angular/cli --migrate-only --from 10 --to 12
# Step 3: Migrate Angular Core
ng update @angular/core --migrate-only --from 10 --to 12