旧Ionic-Angular项目无法运行，寻求解决办法

问题背景 #

作为安卓开发新手，尝试运行一个旧Ionic-Angular项目时无法启动，项目配置及报错信息如下：

初始配置（ionic.config.json） #

{
"name": "QB",
"integrations": {
"cordova": {}
},
"type": "ionic-angular",
"app_id": ""
}

尝试更新依赖后的报错 #

更新所有依赖时出现以下错误：

Invalid project type: ionic-angular (project config: .\ionic.config.json).
Project type must be one of: angular, angular-standalone, react, vue, custom, vue-vite, react-vite

修改项目类型后的新报错 #

将ionic.config.json中的type改为angular后，执行依赖安装出现node-sass编译错误：

npm ERR! code 1
npm ERR! path E:\Projects\QBMobileApp\qbmobileapp\node_modules\node-sass
npm ERR! command failed.
E:\Projects\QBMobileApp\qbmobileapp\node_modules\node-sass
npm ERR! gyp ERR! node -v v18.17.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

项目package.json配置 #

{
  "name": "QB",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular-devkit/build-optimizer": "^0.6.8",
    "@angular/animations": "^12.0.0",
    "@angular/common": "^12.0.0",
    "@angular/compiler": "^12.0.0",
    "@angular/compiler-cli": "^12.0.0",
    "@angular/core": "^12.0.0",
    "@angular/forms": "^12.0.0",
    "@angular/material": "^12.0.0",
    "@angular/platform-browser": "^12.0.0",
    "@angular/platform-browser-dynamic": "^12.0.0",
    "@angular/router": "^12.0.0",
    "@ionic-native/android-permissions": "^5.0.0",
    "@ionic-native/base64": "^5.16.0",
    "@ionic-native/camera": "^5.0.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/date-picker": "^5.14.0",
    "@ionic-native/document-viewer": "^5.0.0",
    "@ionic-native/file": "^5.0.0",
    "@ionic-native/file-opener": "^5.0.0",
    "@ionic-native/file-transfer": "^5.0.0",
    "@ionic-native/firebase-x": "^5.19.1",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic-native/unique-device-id": "^5.0.0",
    "@ionic/pro": "2.0.4",
    "@ionic/storage": "2.2.0",
    "@ngx-translate/core": "8.0.0",
    "@ngx-translate/http-loader": "^2.0.0",
    "com-badrit-base64": "^0.2.0",
    "cordova-android": "^8.1.0",
    "cordova-browser": "^6.0.0",
    "cordova-ios": "^5.1.1",
    "cordova-plugin-advanced-http": "2.1.1",
    "cordova-plugin-android-permissions": "^1.0.2",
    "cordova-plugin-datepicker": "^0.9.3",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-document-viewer": "^0.9.13",
    "cordova-plugin-file": "6.0.2",
    "cordova-plugin-file-opener2": "^2.2.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^4.1.1",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-uniquedeviceid": "^1.3.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-support-google-services": "^1.3.2",
    "ionic-angular": "3.9.5",
    "ionic-native": "^2.9.0",
    "ionicons": "3.0.0",
    "jquery": "^3.4.1",
    "js-sha512": "^0.8.0",
    "moment": "^2.24.0",
    "ngx-slick-carousel": "^0.6.0",
    "node-sass": "^4.14.0",
    "pod": "^0.9.0",
    "rxjs": "^6.5.3",
    "sass-autoprefixer": "^1.0.1",
    "slick-carousel": "^1.8.1",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.11.4"
  },
  "devDependencies": {
    "@angular/cli": "^16.2.1",
    "@ionic/app-scripts": "^3.2.4",
    "@ionic/lab": "^2.0.6",
    "typescript": ">=4.2.3 <4.4",
    "xcode": "^2.1.0"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-ionic-webview": {
        "ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
      },
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-advanced-http": {
        "OKHTTP_VERSION": "3.10.0"
      },
      "cordova-plugin-datepicker": {},
      "com-badrit-base64": {},
      "cordova-plugin-file": {},
      "cordova-plugin-document-viewer": {},
      "cordova-plugin-file-opener2": {
        "ANDROID_SUPPORT_V4_VERSION": "27.+"
      },
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-uniquedeviceid": {}
    },
    "platforms": [
      "browser",
      "android",
      "Ios"
    ]
  }
}

解决方案 #

1. 匹配Node.js版本 #

node-sass@4.14.0仅支持Node.js 10-14版本，当前使用的Node.js 18.17.1版本过高导致编译失败，解决方法：

• 使用nvm（Node版本管理器）安装并切换到Node.js 14.x版本：

  nvm install 14
  nvm use 14
  

• 若未安装nvm，可直接下载对应版本的Node.js安装包替换当前版本。

2. 恢复项目类型并安装适配的Ionic CLI #

当前项目是ionic-angular类型（对应Ionic 3），新版Ionic CLI不再识别该类型，需安装适配版本：

• 卸载全局现有Ionic CLI：

  npm uninstall -g @ionic/cli
  

• 安装Ionic 3.x对应的CLI版本：

  npm install -g ionic@3.20.0
  

• 将ionic.config.json中的type改回ionic-angular：

  "type": "ionic-angular"
  

3. 重新安装依赖 #

• 删除现有node_modules文件夹和package-lock.json文件：

  rm -rf node_modules package-lock.json
  

• 执行依赖安装：

  npm install
  

4. 启动项目 #

使用适配的Ionic CLI启动项目：

ionic serve

额外注意事项 #

• cordova-android@8.1.0支持的Android SDK版本范围有限，若后续编译安卓项目报错，需确保本地Android SDK版本与cordova-android版本兼容；
• 项目中@angular/cli@16.2.1版本过高，与Angular 12不兼容，建议将其降级至Angular 12对应的cli版本（如@angular/cli@12.0.0），避免潜在冲突。

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