[英]Updating angular version from 10 to 12 shows : An unhandled exception occurred: Must use import to load ES Module
While updating the angular from 10 to 12, I was following all the steps which are already written here在将角度从 10 更新到 12 时,我遵循了此处已经编写的所有步骤
https://update.angular.io/?l=3&v=10.0-12.0 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.我试图从
/home/../angular/node_modules/@angular/compiler-cli/package.json
中删除"type": "module"
但它没有解决我的问题。
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:打开 package.json 以将“dependencies”和“devDependencies”中的所有角度项目从 12 更改为 13,例如:
"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全部完成
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
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.在将应用程序的 Angular 版本从 12 升级到 13 时,我遇到了同样的问题。我错过了将包
ng-packagr
更新到最新版本。 After updating the ng-packagr
更新
ng-packagr
后
Version I used: "ng-packagr": "~13.3.1"
我使用的版本:
"ng-packagr": "~13.3.1"
Basically ionic referred angular update to the angular framework site.基本上 ionic 将角度更新称为角度框架站点。 But following the steps was not working for me.
但是按照这些步骤对我不起作用。 What I have done is
我所做的是
sudo npm install -g @ionic/cli@latest
sudo npm install -g @ionic/cli@latest
npm outdated
npm install package_name@latest --force
(replace 'package_name' with the outdated package name) for every package shown in outdated package listnpm install package_name@latest --force
(将'package_name'替换为过时的包名称)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.