Start a new Ionic 3 project with Angular version 4

Question

I've installed Ionic 3.6 which supports Angular 4.0.1 since I want to reuse some code I've already developed for the desktop app. The problem I'm facing is that when I create a new project with

ionic start newProject

it uses Angular 5 as you can see from the package.json here below, where you can see that also angular-ionic 3.9.2 is a dependency.

How can I create a new project with Angular 4.0.1? This is important also because when I test the project with ionic cordova run android and then edit a file, the connection breaks with an error.

Thank you.

{
  "name": "my5thproject",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/compiler-cli": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@ionic-native/core": "4.3.2",
    "@ionic-native/splash-screen": "4.3.2",
    "@ionic-native/status-bar": "4.3.2",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.0",
    "@ionic/cli-plugin-ionic-angular": "1.4.1",
    "ionic": "3.6.0",
    "typescript": "2.4.2"
  },
  "description": "An Ionic project"
}

Answer 1

Inspired by the answer of Suresh the final solution has involved different steps:

• changed package.json (I attach it at the end of the answer)
  • used Angular 4.1.3 which is the right one for ionic 3.6.0 and is fine for my project
  • changed also rxjs to 5.4.0
  • changed also zone.js to 0.8.12
  • changed also typescript to 2.3.4
• deleted node_modules folder
• launched npm install inside the project
• installed rxjs and zone.js
  • npm install rxjs@5.4.0
  • npm install zone.js@0.8.12
• installed the right version of Cordova to prevent an error
  • npm install --save-dev @ionic/cli-plugin-cordova@1.4.1
• changed minSdkVersion to 19 in config.xml in the following line to prevent another error
  • <preference name="android-minSdkVersion" value="19" />
• Then I got this "throw er; // Unhandled 'error' event" which I solved with the command
  • npm i -D -E ws@3.3.2

It's been quite a journey but I finally did it. Thanks also to many other answers on SO. It would be interesting to know if there's a more straightforward solution.

package.json

{
  "name": "my5thproject",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@ionic-native/core": "4.3.2",
    "@ionic-native/splash-screen": "4.3.2",
    "@ionic-native/status-bar": "4.3.2",
    "@ionic/storage": "2.1.3",
    "ajv": "^6.5.5",
    "cordova-android": "7.1.1",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-ionic-webview": "^1.2.1",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-whitelist": "^1.3.1",
    "ionic-angular": "3.6.0",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "rxjs": "^5.4.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.0",
    "@ionic/cli-plugin-cordova": "^1.4.1",
    "@ionic/cli-plugin-ionic-angular": "1.4.1",
    "ionic": "3.6.0",
    "typescript": "2.3.4",
    "ws": "3.3.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "ionic-plugin-keyboard": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {}
    },
    "platforms": [
      "android"
    ]
  }
}

Answer 2

You should need to use latest version of 3 i.e 3.9.2 which will have performance and bug fixes. Your code written for 3.6 should work for 3.9.1. Please try integrating it. If you still want to use specific versions. You can manually update the package.json file.

{
  "name": "my5thproject",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.0.1",
    "@angular/compiler": "4.0.1",
    "@angular/compiler-cli": "4.0.1",
    "@angular/core": "4.0.1",
    "@angular/forms": "4.0.1",
    "@angular/http": "4.0.1",
    "@angular/platform-browser": "4.0.1",
    "@angular/platform-browser-dynamic": "4.0.1",
    "@ionic-native/core": "4.3.2",
    "@ionic-native/splash-screen": "4.3.2",
    "@ionic-native/status-bar": "4.3.2",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.6.0",
    "ionicons": "3.0.0",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.0",
    "@ionic/cli-plugin-ionic-angular": "1.4.1",
    "ionic": "3.6.0",
    "typescript": "2.4.2"
  },
  "description": "An Ionic project"
}

After updating package.json. Try removing node_modules folder and run 'npm install'.