升级Ionic和Cordova CLI后Capacitor同步iOS报错求助

原可运行技术栈 #

Cordova CLI 10.0.0
Ionic CLI 6.18.0
Node.js 16.13.0
Node.js versions
12.22.7 / 14.18.1 / 16.13.0
npm 8.1.0
Yarn 1.22.17
Python 2 / 3
macOS 11.6.1
Carthage 0.38.0
CocoaPods 1.11.2
Xcode 13.1

升级后技术栈（编译失败） #

Cordova CLI 12.0.0
Ionic CLI 6.20.9
Node.js 18.15.0
Node.js versions 14.21.3 / 16.19.1 / 18.15.0
npm 8.19.4
Yarn 1.22.19
Python 3
macOS 12.6
Carthage 0.38.0
CocoaPods 1.12.0
Xcode 14.2

package.json依赖列表 #

"dependencies": {
    "@angular/animations": "^12.0.0",
    "@angular/common": "~11.2.0",
    "@angular/core": "~11.2.0",
    "@angular/fire": "^6.1.5",
    "@angular/forms": "~11.2.0",
    "@angular/platform-browser": "~11.2.0",
    "@angular/platform-browser-dynamic": "~11.2.0",
    "@angular/router": "~11.2.0",
    "@capacitor-community/apple-sign-in": "^0.1.1",
    "@capacitor-community/facebook-login": "^3.0.0",
    "@capacitor/android": "^3.0.1",
    "@capacitor/app": "^1.0.1",
    "@capacitor/camera": "^1.0.1",
    "@capacitor/core": "^3.0.1",
    "@capacitor/filesystem": "^1.0.1",
    "@capacitor/geolocation": "^1.0.1",
    "@capacitor/haptics": "^1.0.1",
    "@capacitor/ios": "^3.0.1",
    "@capacitor/keyboard": "^1.0.1",
    "@capacitor/share": "^1.0.1",
    "@capacitor/splash-screen": "^1.0.1",
    "@capacitor/status-bar": "^1.0.1",
    "@codetrix-studio/capacitor-google-auth": "^3.0.1",
    "@cometchat-pro/chat": "^2.2.1",
    "@ctrl/ngx-emoji-mart": "^5.1.1",
    "@ionic-native/calendar": "^5.33.0",
    "@ionic-native/core": "^5.32.0",
    "@ionic-native/launch-navigator": "^5.32.1",
    "@ionic-native/native-storage": "^5.32.0",
    "@ionic/angular": "^5.5.2",
    "@ionic/pwa-elements": "^3.0.2",
    "@types/googlemaps": "^3.43.3",
    "@videogular/ngx-videogular": "^3.0.1",
    "br-mask": "0.0.10",
    "cordova-plugin-actionsheet": "^2.3.3",
    "cordova-plugin-calendar": "^5.1.5",
    "cordova-plugin-dialogs": "^2.0.2",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-nativestorage": "^2.3.2",
    "es6-promise-plugin": "^4.2.2",
    "firebase": "^7.0 || ^8.0",
    "ion2-calendar": "^3.5.0",
    "ionic4-mask-directive": "^1.0.2",
    "jetifier": "^1.6.6",
    "jwt-decode": "^3.1.2",
    "moment": "^2.29.1",
    "ngx-long-press2": "^1.0.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "uk.co.workingedge.phonegap.plugin.launchnavigator": "^5.0.5",
    "videogular2": "^7.0.2",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.1200.0-rc.0",
    "@angular-devkit/build-angular": "~0.1102.4",
    "@angular/cli": "^16.0.3",
    "@angular/compiler": "~11.2.0",
    "@angular/compiler-cli": "~11.2.0",
    "@angular/language-service": "~11.2.0",
    "@capacitor/cli": "^5.0.4",
    "@ionic/angular-toolkit": "^9.0.0",
    "@types/core-js": "^2.5.4",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^0.0.28",
    "firebase-tools": "^12.2.1",
    "fuzzy": "^0.1.3",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.0.1",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "jsonc-parser": "^3.0.0",
    "karma": "^6.4.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "open": "^7.0.3",
    "protractor": "^3.3.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }

执行ionic capacitor sync ios --verbose后的错误信息 #

Error: ./src/global.scss (./node_modules/css-loader/dist/cjs.js??ref--14-1!./node_modules/postcss-loader/dist/cjs.js??ref--14-2!./node_modules/resolve-url-loader??ref--14-3!./node_modules/sass-loader/dist/cjs.js??ref--14-4!./src/global.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Unknown node type in node creation
    at /Users/al/Documents/mobile/node_modules/@ionic/angular/css/float-elements.css:20:1
    at Rule.normalize (/Users/al/Documents/mobile/node_modules/postcss/lib/container.js:334:13)
    at Rule.append (/Users/al/Documents/mobile/node_modules/postcss/lib/container.js:166:24)
    at Supports.virtual (/Users/al/Documents/mobile/node_modules/autoprefixer/lib/supports.js:71:10)
    at Supports.prefixed (/Users/al/Documents/mobile/node_modules/autoprefixer/lib/supports.js:79:21)
    at /Users/al/Documents/mobile/node_modules/autoprefixer/lib/supports.js:239:29
    at Array.map (<anonymous>)
    at Supports.add (/Users/al/Documents/mobile/node_modules/autoprefixer/lib/supports.js:237:18)
    at Supports.process (/Users/ali.akram/Documents/mobile/node_modules/autoprefixer/lib/supports.js:262:16)
    at /Users/al/Documents/mobile/node_modules/autoprefixer/lib/processor.js:67:27
    at /Users/al/Documents/mobile/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/container.js:138:18
    at /Users/al/Documents/mobile/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/container.js:74:18
    at Root.each (/Users/al/Documents/mobile/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/container.js:60:16)
    at Root.walk (/Users/al/Documents/mobile/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/container.js:71:17)
    at Root.walkAtRules (/Users/al/Documents/mobile/node_modules/@angular-devkit/build-angular/node_modules/postcss/lib/container.js:136:19)
    at Processor.add (/Users/al/Documents/mobile/node_modules/autoprefixer/lib/processor.js:53:9)
    at OnceExit (/Users/al/Documents/mobile/node_modules/autoprefixer/lib/autoprefixer.js:129:32)

问题根源与修复方案 #

1. 核心问题分析 #

• Angular版本混乱：@angular/animations为^{12.0.0，其余核心Angular包为~11.2.0，同时`@angular/cli`升级到}16.0.3，跨版本冲突导致构建工具与框架核心不兼容。
• Capacitor版本断层：@capacitor/core及插件为^{3.0.1，但`@capacitor/cli`为}5.0.4，CLI与核心包版本必须严格一致，否则会触发同步和编译错误。
• PostCSS/autoprefixer冲突：旧版本@angular-devkit/build-angular（~0.1102.4）与升级后工具链的PostCSS版本不兼容，导致解析Ionic CSS时节点创建失败。

2. 分步修复步骤 #

步骤1：统一Angular版本到11.x（匹配Ionic 5）

Ionic 5.5.2仅支持Angular 10-12，优先统一到11.x避免跨版本问题：
修改package.json中相关依赖：

"@angular/animations": "~11.2.0",
"@angular/cli": "~11.2.4",
"@angular-devkit/architect": "~0.1102.4"

步骤2：同步Capacitor CLI与核心包版本

将@capacitor/cli降级到与@capacitor/core一致的3.0.1：

"@capacitor/cli": "^3.0.1"

步骤3：锁定PostCSS/autoprefixer兼容版本

• 对于npm（8+），在package.json中添加：

  "overrides": {
    "postcss": "^8.4.21",
    "autoprefixer": "^10.4.14"
  }
  

• 对于Yarn，在package.json中添加：

  "resolutions": {
    "postcss": "^8.4.21",
    "autoprefixer": "^10.4.14"
  }
  

步骤4：降级Ionic Angular Toolkit

@ionic/angular-toolkit9.0.0与Angular 11不兼容，需降级：

"@ionic/angular-toolkit": "^3.1.1"

步骤5：清理并重新安装依赖

rm -rf node_modules package-lock.json yarn.lock
npm install # 或 yarn install

步骤6：重新同步Capacitor项目

ionic capacitor sync ios

3. 额外建议 #

Angular 11建议使用Node.js 12.x-14.x，暂时回退到14.18.1可进一步降低版本兼容风险。

内容的提问来源于stack exchange，提问作者Ali Akram