如何在 MS Visual Studio Community 2017 中使用 Ionic 3？答案

【问题标题】：How to use Ionic 3 with MS Visual Studio Community 2017?如何在 MS Visual Studio Community 2017 中使用 Ionic 3？
【发布时间】：2017-07-26 15:55:23
【问题描述】：

我在 MS Visual Studio Community 2017 中使用 Ionic 2 已经有一段时间了。在 Visual Studio Market 中可以下载和使用插件 Ionic 2 Templates for VS。

就像点击一样简单：

新项目 > TypeScript > 移动应用 > Ionic 2 - 空白

但是我找不到 Ionic 3 的模板。（似乎还没有发布）

知道如何手动将 Ionic 3 添加到 Visual Studio 中吗？

谢谢！

【问题讨论】：

标签： visual-studio-2017 ionic3

【解决方案1】：

我刚刚开始，所以这可能不太正确，但我做了以下事情：

确保您已通过 VS2017 安装程序安装了 Cordova 工作负载。
使用 VS2017 和 Ionic 2 模板创建一个新项目
如果您还没有安装 Ionic，请通过命令行：
- npm install -g ionic@latest
通过命令行创建一个新的 Ionic 3 应用程序。根据您要使用的模板，使用sidemenu 或tabs 或blank。我看到https://market.ionic.io/starters/ 中还有很多内容，您可能可以以某种方式使用它们。
- ionic start YourNewAppName sidemenu
将 Ionic 2 项目文件夹中的文件复制到 Ionic 3 项目文件夹中：
- taco.json
- XXXX.jsproj（暂时不要重命名）
- XXXX.sln（暂时不要重命名）
在VS2017中启动XXXX.sln
- VS提示我升级工程文件，OK。
- VS 提示我设置 typescript 的版本，OK。

现在 .sln 文件可用于编辑和运行 Ionic 3 项目

【讨论】：

我尝试使用 npm 但无法识别，所以我安装了 Node JS。现在使用 ionic 时会出现同样的错误。谷歌建议安装科尔多瓦。我怎么能在没有安装在 visyal studio 2017 中的情况下使用 ionic？
是的，您需要通过 VS2017 安装 Cordova 才能使其在 VS 中运行。
我试过这个并且 sln 工作（或多或少）。但是在为 android 构建时，ionic:build 没有启动，并且在构建 apk 之后（我能够通过 NPM Task Runner 启动 ionic:build）我收到一个错误，即没有找到要发布到设备的 apk。但是该 apk 已创建，可以在 output\apk\debug 文件夹中找到。有什么帮助/建议吗？

【解决方案2】：

此答案的未来读者需要了解，下面引用的版本是发布时软件包的最新版本。这意味着，在阅读时可能会有更新的版本。

升级您的 Ionic CLI。在本文发布时，最新版本是 3.9.1。

npm install -g 离子

升级您的 NPM Ionic 包依赖项。
您很可能需要 Angular 的 4.x 版本，以及相关的 Angular npm 依赖项（即 CORE、编译器、FORMS、HTTP 等）。您很可能需要 3.x 版本的 Ionic-Angular 和 4.x 版本的 Ionic 本机软件包。

在我看来，最好的方法是使用最新版本的 Ionic CLI 创建一个全新的临时 Ionic 应用程序。然后检查 package.json 文件中列出的 NPM 包，并手动更新您的真实应用程序的 package.json 以匹配。保持谨慎和有条不紊。

为了您的方便，我附加了一个使用全新 Ionic 3 应用程序创建的默认 package.json 依赖项。

"dependencies": {
        "@angular/common": "4.3.5",
        "@angular/compiler": "4.3.5",
        "@angular/compiler-cli": "4.3.5",
        "@angular/core": "4.3.5",
        "@angular/forms": "4.3.5",
        "@angular/http": "4.3.5",
        "@angular/platform-browser": "4.3.5",
        "@angular/platform-browser-dynamic": "4.3.5",
        "@ionic-native/core": "4.1.0",
        "@ionic-native/splash-screen": "4.1.0",
        "@ionic-native/status-bar": "4.1.0",
        "@ionic/storage": "2.0.1",
        "ionic-angular": "3.6.0",
        "ionicons": "3.0.0",
        "rxjs": "5.4.3",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.16"
      },
      "devDependencies": {
        "@ionic/app-scripts": "2.1.4",
        "typescript": "2.3.4"
      },

【讨论】：