使用 Angular 4 开始一个新的 Ionic 3 项目

Question

我已经安装了支持 Angular 4.0.1 的 Ionic 3.6，因为我想重用我已经为桌面应用程序开发的一些代码。 我面临的问题是，当我用

创建一个新项目时

ionic start newProject

它使用 Angular 5，您可以从下面的 package.json 中看到，在这里您可以看到 angular-ionic 3.9.2 也是一个依赖项。

如何使用 Angular 4.0.1 创建新项目？这也很重要，因为当我使用 ionic cordova run android 测试项目然后编辑文件时，连接会因错误而中断。

谢谢。

{
  "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

受 Suresh 回答的启发，最终解决方案涉及不同的步骤：

• 更改了package.json（我附在答案末尾）
  • 使用 Angular 4.1.3，它适合 ionic 3.6.0，适合我的项目
  • 也将 rxjs 更改为 5.4.0
  • 还将 zone.js 更改为 0.8.12
  • 也将 typescript 更改为 2.3.4
• 已删除 node_modules 文件夹
• 在项目内启动npm install
• 已安装 rxjs 和 zone.js
  • npm install rxjs@5.4.0
  • npm install zone.js@0.8.12
• 安装了正确版本的 Cordova 以防止出错
  • npm install --save-dev @ionic/cli-plugin-cordova@1.4.1
• 将 config.xml 中的 minSdkVersion 更改为 19，以防止再次出现错误
  • <preference name="android-minSdkVersion" value="19" />
• 然后我得到了这个“throw er; // Unhandled 'error' event”，我用命令解决了这个问题
  • npm i -D -E ws@3.3.2

这是一段漫长的旅程，但我终于做到了。还要感谢关于 SO 的许多其他答案。想知道是否有更直接的解决方案会很有趣。

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

您应该需要使用 3 的最新版本，即 3.9.2，它将具有性能和错误修复。您为 3.6 编写的代码应该适用于 3.9.1。请尝试整合它。如果您仍想使用特定版本。您可以手动更新 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.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"
}

更新 package.json 后。尝试删除 node_modules 文件夹并运行“npm install”。