ionic-frameworkionic4ionic-cli

Switching between Ionic Cli versions?

I am working on multiple projects, some of which use Ionic 1 and others that use Ionic 4. However, switching between them has become a problem. After updating Ionic CLI to the latest and working on 4 I am now trying to work on an older Ionic 1.

The problem is every time I run ionic serve I get the following:

Error: spawn ENOTDIR

at _errnoException (util.js:1024:11)
at ChildProcess.spawn (internal/child_process.js:323:11)
at Object.exports.spawn (child_process.js:502:9)
at spawn (/usr/local/lib/node_modules/ionic/node_modules/cross-spawn/index.js:17:18)
at spawn (/usr/local/lib/node_modules/ionic/node_modules/@ionic/cli-framework/utils/shell.js:124:12)
at ShellCommand.spawn (/usr/local/lib/node_modules/ionic/node_modules/@ionic/cli-framework/utils/shell.js:113:16)
at Shell.spawn (/usr/local/lib/node_modules/ionic/node_modules/@ionic/cli-utils/lib/shell.js:136:23)
at Ionic1ServeCLI.<anonymous> (/usr/local/lib/node_modules/ionic/node_modules/@ionic/cli-utils/lib/serve.js:398:36)
at Generator.next (<anonymous>)
at fulfilled (/usr/local/lib/node_modules/ionic/node_modules/tslib/tslib.js:104:62)

I have tried various solutions such as this and this and this with no luck.

I have also tried updating my npm dependencies with no luck. 

 cordova                             ^7.1.0  →  ^8.0.0 
 cordova-android                     ^6.3.0  →  ^7.1.1 
 cordova-plugin-device               ^1.1.7  →  ^2.0.2 
 cordova-plugin-file                 ^5.0.0  →  ^6.0.1 
 cordova-plugin-inappbrowser         ^1.7.2  →  ^3.0.0 
 cordova-plugin-network-information  ^1.3.4  →  ^2.0.1 
 cordova-plugin-screen-orientation   ^2.0.2  →  ^3.0.1 
 cordova-plugin-splashscreen         ^4.1.0  →  ^5.0.2 
 gulp-sass                           ^3.1.0  →  ^4.0.1

From what I can tell the documentation shows the latest CLI is backwards compatible.

EDIT:

ionic info:

Ionic:

   ionic (Ionic CLI) : 4.1.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework   : ionic1 1.3.3
   @ionic/v1-toolkit : not installed

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 6.3.0
   Cordova Plugins       : no whitelisted plugins (13 plugins total)

System:

   Android SDK Tools : 26.1.1 (/Users/jrquick/Library/Android/sdk)
   NodeJS            : v8.9.2 (/usr/local/bin/node)
   npm               : 6.4.1
   OS                : macOS High Sierra
Solution

  • Apparently, there have been some changes within ionic1 projects that need to be implemented in order to support the latest Ionic CLI. To figure this out I updated the latest Ionic (sudo npm install -g ionic@latest), created a temporary project (ionic start myproject --type ionic1) and then compared the files to see what has changed.

    My Steps (See below for examples)

    1. Update ionic-bower to the 1.3.4 (found in bower.json)
    2. Remove gulpStartupTasks and update watchPatterns (found in ionic.config.json).
    3. Create ionic.starter.json
    4. Install @ionic/v1-toolkit and update gulp devDependencies (found in package.json)
    5. rm -f package-lock.json && rm -rf node_modules/ && rm -rf www/lib/ && npm install && bower install
    6. ionic serve

    Examples (Updated Files)

    bower.json

    {
  "name": "r01",
  "private": true,
  "devDependencies": {
    "ionic": "driftyco/ionic-bower#1.3.4"
  },
  "authors": [
    "jrquick <>"
  ],
  "description": "",
  "main": "",
  "license": "",
  "homepage": "",
  "dependencies": {
    "ngCordova": "^0.1.27-alpha",
    "ionic-toast": "^0.4.1",
    "angular-perfect-scrollbar": "^0.2.1",
    "ionic-calendar": "^0.3.8",
    "ionic-color-picker": "^1.0.3"
  }
}

    ionic.config.json

    {
  "name": "r01",
  "integrations": {
    "cordova": {},
    "gulp": {}
  },
  "watchPatterns": [
      "scss/**/*",
      "www/**/*",
      "!www/lib/**/*",
      "!www/**/*.map"
  ],
  "type": "ionic1",
  "pro_id": ""
}

    ionic.starter.json

    {
  "name": "r01",
  "baseref": "master"
}

    package.json

    {
  "name": "r01",
  "version": "2.6.3",
  "description": "",
  "dependencies": {
    "cordova": "^8.0.0",
    "cordova-android": "^7.1.1",
    "cordova-externalstoragepath-plugin": "^1.0.4",
    "cordova-ios": "~4.5.5",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-console": "^1.1.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-exclude-files": "^0.4.1",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-inappbrowser": "^3.0.0",
    "cordova-plugin-network-information": "^2.0.1",
    "cordova-plugin-screen-orientation": "^3.0.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "es6-promise-plugin": "^4.2.2",
    "ionic-plugin-keyboard": "^2.2.1"
  },
  "devDependencies": {
    "@ionic/v1-toolkit": "^1.0.0",
    "gulp": "^3.5.6",
    "gulp-clean-css": "^3.7.0",
    "gulp-rename": "^1.2.0",
    "gulp-sass": "^3.1.0",
    "ionic-minify": "^2.0.10"
  },
  "cordovaPlugins": [
    "cordova-plugin-device",
    "cordova-plugin-console",
    "cordova-plugin-whitelist",
    "cordova-plugin-splashscreen",
    "cordova-plugin-statusbar",
    "ionic-plugin-keyboard"
  ],
  "cordovaPlatforms": [],
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "[PRIVATE REPO]"
  },
  "author": "jrquick <>",
  "homepage": "[PRIVATE HOMEPAGE]",
  "cordova": {
    "plugins": {
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "cordova-plugin-network-information": {},
      "cordova-plugin-screen-orientation": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-file": {},
      "cordova-externalstoragepath-plugin": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-exclude-files": {}
    },
    "platforms": [
      "android"
    ]
  }
}