Angular 15升级后CommonJS依赖警告与ol.css编译失败求助

一、CommonJS依赖警告处理 #

警告源于项目依赖的部分包采用CommonJS/AMD格式，导致Angular构建优化降级。需在angular.json的构建配置中添加允许的CommonJS依赖：

1. 打开angular.json，找到projects -> [你的项目名] -> architect -> build -> options
2. 添加或修改allowedCommonJsDependencies配置：

"allowedCommonJsDependencies": [
  "xml-utils",
  "lru-cache",
  "rbush",
  "geotiff"
]

3. 保存后重启ng serve，警告即可消除。

二、ol.css编译错误处理 #

该错误是OpenLayers版本与Angular 15不兼容导致的样式解析失败，可通过以下两种方式解决：

方案1：升级OpenLayers到兼容版本 #

旧版ol@6.15.1与Angular 15的webpack配置不匹配，升级到适配版本即可：

npm uninstall ol
npm install ol@^7.4.0

升级后，确保在angular.json的styles数组中正确引入样式：

"styles": [
  "node_modules/ol/ol.css",
  "src/styles.scss" // 你的其他全局样式
]

方案2：调整样式导入方式（不升级版本） #

若坚持使用旧版ol，需修改样式导入方式：

• 移除ts文件中直接import 'ol/ol.css'的代码
• 在全局样式文件（如src/styles.scss）中添加：

@import '~ol/ol.css';

三、额外兼容性修复 #

你的package.json中存在多组版本不匹配的依赖，可能引发其他潜在问题，建议同步升级：

1. 将@angular/localize降级到与Angular 15匹配的版本：

npm install @angular/localize@^15.2.10

2. 升级第三方UI库到Angular 15兼容版本：

npm install ng-zorro-antd@^15.1.1 primeng@^15.0.0 @ant-design/icons-angular@^15.0.0

完成以上操作后，执行npm install重新安装依赖，再启动项目即可解决所有问题。

内容的提问来源于stack exchange，提问作者Anna Korotkova