How to use Ionic 3 with MS Visual Studio Community 2017?

I'm just getting started so this might be not quite right, but I did the following:

  • Ensure you have the Cordova workload installed through VS2017 installer.
  • Create a new project using VS2017 and the Ionic 2 template
  • Install Ionic latest if you haven't, via the command line:
  • Create a new Ionic 3 app, via the command line. Use sidemenu or tabs or blank depending on what template you want to use. I see there's a ton more in https://market.ionic.io/starters/ which you can probably use somehow.
    • ionic start YourNewAppName sidemenu
  • Copy files from your Ionic 2 project folder into your Ionic 3 project folder:
    • taco.json
    • XXXX.jsproj (don't rename just yet)
    • XXXX.sln (don't rename just yet)
  • Launch the XXXX.sln in VS2017
    • VS prompted me to upgrade project file, OK.
    • VS prompted me to set version of typescript, OK.

Now the .sln file works for editing & running the Ionic 3 project


Future readers of this answer need to understand that the versions referenced below are the latest versions of the packages at the time of this posting. That means, newer versions may be available at the time of reading.

  1. Upgrade your Ionic CLI. At the time of this post, the latest version is 3.9.1.

npm install -g ionic

  1. Upgrade your NPM Ionic package dependencies.
    Most likely you'll need 4.x versions of Angular, and the associated Angular npm dependencies (i.e. CORE, COMPILER, FORMS, HTTP, etc). Most likely you'll need 3.x versions of Ionic-Angular, and 4.x versions of Ionic native packages.

The best way to do this, in my mind, is to use the latest version of the Ionic CLI to create a brand new temporary Ionic application. And then examine the NPM packages listed in the package.json file, and manually update your real application's package.json to match. Be cautious and methodical.

For your convienance, I've attached a default package.json dependencies that's created with a brand new Ionic 3 application.

"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"
      },