Updating angular version from 10 to 12 shows : An unhandled exception occurred: Must use import to load ES Module

Question

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

Answer 1

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

Answer 2

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

Answer 3

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"

Answer 4

Basically ionic referred angular update to the angular framework site. But following the steps was not working for me. What I have done is

1. run sudo npm install -g @ionic/cli@latest
   to install latest ionic package and run
   npm outdated
   to get outdated packages.
   
2. run npm install package_name@latest --force (replace 'package_name' with the outdated package name) for every package shown in outdated package list
   
3. Ignore any warning during update.
   
   
   TIP:Updating all the outdated packages saves you from app's low performance and improves security