web-dev-qa-db-fra.com

Comment migrer Ionic Cordova 3 à Ionic Cordova 5?

J'ai un projet Ionic projet et je dois mise à nivea à ionic 5. Aimablement besoin de la meilleure façon de mettre à niveau le projet.

ionic-frameworkionic3ionic5
6
iOSPrince

Vous pouvez le faire en deux étapes.

ionic 3 à Ionic 4

Pour une liste complète des modifications de rupture de Ionic 3 à _ 3 à Ionic 4, veuillez vous reporter à le document Modifications de la rupture de la rupture dans l'Ionic repo de base.

Dans Ionic 4, le nom du paquet est @ionic/angular. Désinstallez Ionic 3 et installez Ionic 4 Utilisation du nouveau nom du package:

npm uninstall ionic-angular
npm install @ionic/angular

Le processus général lors de la migration d'une application existante de Ionic 3 à 4:

  1. Générez un nouveau projet à l'aide du démarreur blank (voir Démarrer une application )

  2. Copiez tous les services Angular de src/providers À src/app/services

    • Les services doivent inclure { providedIn: 'root' } Dans le décorateur @Injectable() Decorator. Pour plus de détails, veuillez vous reporter à Angular Documents du fournisseur .

  3. Copiez les autres éléments de niveau racine de l'application (tuyaux, composants, etc.) en gardant à l'esprit que la structure de répertoire passe à partir de src/components À src/app/components, Etc.

  4. Copiez Global Sass Styling à partir de src/app/app.scss À src/global.scss

  5. Copiez le reste de l'application, page par page ou fonctionnalité par fonctionnalité, en gardant à l'esprit les éléments suivants:

    • Shadow Dom émulé est activé par défaut
    • La page de page/composante ne doit plus être enveloppée dans l'étiquette de la page/du composant et doit utiliser l'option styleUrls de Angular du @Component Decorator
    • RXJS a été mis à jour à partir de V5 à V6 (voir modifications RXJS )
    • Certains crochets de cycle de vie doivent être remplacés par des crochets de l'angulaire (voir Evénements de cycle de vie )
    • Les modifications de balisage peuvent être nécessaires (outil de migration disponible, voir Modifications de marquage )

Dans de nombreux cas, en utilisant la CLI Ionic pour générer un nouvel objet, puis la copie du code fonctionne très bien. Par exemple: ionic g service weather Créera une coque Weather service et test. Le code peut ensuite être copié à partir du projet plus ancien avec des modifications mineures au besoin. Cela aide à s'assurer que la structure appropriée est suivie. Cela génère également des coquilles pour des tests d'unités.

ionic 4 à Ionic 5

Migration d'une application de 4.x à 5.x nécessite quelques mises à jour des propriétés de l'API, CSS Utilities et les dépendances d'emballage installées.

Pour une liste complète des modifications de rupture de 4.x à 5.x, veuillez vous reporter à le document Modifications de la rupture de la rupture dans le repo Ionic.

Pour les projets Angular, vous pouvez simplement exécuter:

npm install @ionic/angular@latest @ionic/angular-toolkit@latest --save

Pour des informations supplémentaires et des instructions Check Guide de migration .

1
Tomislav Stankovic