web-dev-qa-db-fra.com

Comment utiliser Ionic 3 avec MS Visual Studio Community 2017?

J'utilise Ionic 2 avec MS Visual Studio Community 2017 depuis un certain temps . Dans Visual Studio Market, le plugin Ionic 2 Templates for VS peut être téléchargé et utilisé.

C'est aussi simple que de cliquer:

Nouveau projet> TypeScript> Applications mobiles> Ionic 2 - Blank

Cependant, je ne trouve pas de modèle pour Ionic 3. (semble pas encore publié)

Une idée de comment ajouter manuellement Ionic 3 à Visual Studio?

Merci!

visual-studio-2017ionic3
6
JamesAnd

Les futurs lecteurs de cette réponse doivent comprendre que les versions référencées ci-dessous sont les dernières versions des packages au moment de la publication. Cela signifie que de nouvelles versions peuvent être disponibles au moment de la lecture.

  1. Mettez à niveau votre CLI Ionic. Au moment de cet article, la dernière version est 3.9.1.

npm install -g ionic

  1. Mettez à niveau vos dépendances du paquet NPM Ionic.
    Très probablement, vous aurez besoin des versions 4.x de Angular et des dépendances angulaires npm associées (par exemple, CORE, COMPILER, FORMS, HTTP, etc.). Vous aurez probablement besoin des versions 3.x de Ionic-Angular et 4.x des packages natifs Ionic.

La meilleure façon de le faire, à mon sens, consiste à utiliser la dernière version de l'interface de ligne de commande Ionic pour créer une toute nouvelle application ionique temporaire. Ensuite, examinez les packages NPM répertoriés dans le fichier package.json et mettez à jour manuellement le package.json de votre application réelle afin qu'il corresponde. Soyez prudent et méthodique. 

Pour votre commodité, j'ai joint une dépendance par défaut package.json créée avec une toute nouvelle application Ionic 3. 

"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"
      },
3
Steve Kennedy

Je viens juste de commencer, alors ce n'est peut-être pas tout à fait correct, mais j'ai fait ce qui suit: 

  • Assurez-vous que le workload Cordova est installé via le programme d’installation VS2017. 
  • Créer un nouveau projet en utilisant VS2017 et le modèle Ionic 2
  • Installez Ionic plus tard si vous ne l’avez pas fait, via la ligne de commande:
    • npm install -g ionic@latest
  • Créez une nouvelle application Ionic 3 via la ligne de commande. Utilisez sidemenu ou tabs ou blank en fonction du modèle que vous souhaitez utiliser. Je vois qu'il y en a beaucoup plus dans https://market.ionic.io/starters/ que vous pouvez probablement utiliser d'une manière ou d'une autre.
    • ionic start YourNewAppName sidemenu
  • Copiez les fichiers de votre dossier de projet Ionic 2 dans votre dossier de projet Ionic 3:
    • taco.json
    • XXXX.jsproj (ne pas renommer pour l'instant)
    • XXXX.sln (ne pas renommer pour l'instant)
  • Lancez XXXX.sln dans VS2017
    • VS m'a invité à mettre à niveau le fichier de projet, OK.
    • VS m'a invité à définir la version de TypeScript, OK.

Maintenant, le fichier .sln fonctionne pour l'édition et l'exécution du projet Ionic 3

8
Rory