5
votes

Migration AngularJS vers l'utilisation des importations / exportations

Notre projet est actuellement toujours en cours d'exécution sur AngularJS (v1.6) + TypeScript, mais nous voulons commencer à préparer l'application à la mise à niveau vers la dernière version Angular, en implémentant des composants, comme ils sont écrits en Angular. Actuellement, nous n'utilisons ni importations ni exportations, mais souhaitons l'introduire progressivement. C'est à dire. nous aimerions commencer à utiliser:

angular
  .module('myModule', [])
  .component('myComponent', MyComponent);

au lieu de

import * as angular from "angular";
import { MyComponentComponent } from './MyComponent.component';

export default angular
  .module('myModule', [])
  .component('myComponent', MyComponent);

Cependant, cela pose actuellement des problèmes en raison de la portée. Notre application a maintenant la variable globale angulaire à laquelle tout est attaché, tandis que l'import / export crée des fermetures qui injectent une instance distincte de angular , donc les deux ne sont pas capables de communiquer.

Existe-t-il un moyen de combiner les deux méthodes afin que nous puissions progressivement mettre à niveau le système existant?


5 commentaires

êtes-vous passer par vsavkin. com /… ?


@IftekharDani qui suppose que nous utilisons déjà des composants avec des importations et des exportations, ce que nous ne sommes pas ..


tout d'abord, vous n'avez pas de variable «globale» appelée angulaire. Vous avez simplement une variable qui peut être importée - il y a une différence. Donc je ne comprends pas tout à fait complètement, donc vous exportez la variable angulaire puis dans différentes classes l'importez et y attachez d'autres modules?


@NicolasGehlert actuellement, nous n'importons / n'exportons rien, mais utilisons la version plus simple d'AngularJS avec Typescript et tout est simplement initialisé avec angular.module ('myModule'). Component ('myComponent', MyComponent); < / code>, etc. Mais nous voulons commencer à utiliser les importations pour préparer notre code pour une mise à niveau.


hm je ne vois aucun problème avec votre approche. pouvez-vous essayer de créer un exemple de base dans stackblitz?


3 Réponses :


4
votes

Essayez d'utiliser NgUpgrade, il mettra à jour votre application vers la dernière version.

Jetez un œil sur https://angular.io/guide/upgrade


0 commentaires

2
votes

Utiliser ngUpgrade pour mettre à jour l'angular est une très bonne suggestion. Avec l'aide de cela, vous pouvez mettre à niveau votre projet angularjs existant d'une manière beaucoup plus efficace, comme convertir le code côte à côte en exécutant angularjs et angular code simultanément. Pour réussir la migration, vous devez suivre certaines étapes:

  1. Installation de dépendances pour Angular et ngUpgrade.
  2. Configurez ngUpgrade pour votre projet.

Nous sommes également en train de migrer notre projet angularjs vers angular. Nous avons suivi les références ci-dessous pour notre migration. Il vous fournira un aperçu détaillé du processus et espère qu'il vous aidera d'une manière ou d'une autre:


6 commentaires

Merci! Je suis bloqué à l'étape 1, nous avons une construction avec grunt (et AngularJS via bower ). Ce n'est pas clair pour moi, comment j'utilise Angular à la place. Dois-je supprimer l'ancien AngularJS de la version et le remplacer par un nouveau?


La première étape de @Richard serait d'abandonner Bower et de passer au npm ou au fil.


La prochaine étape serait de commencer à convertir votre code en composants à partir d'AngularJS progressivement, car les composants sont plus faciles à convertir en Angular plus tard.


lors de la conversion, utilisez simultanément angular et angularJS comme indiqué dans l'une des références ci-dessus.


Merci, nous avons déjà commencé à convertir les contrôleurs et les directives en composants, mais maintenant au stade où je veux commencer à utiliser Angular . Nous avons un projet assez gros, de toute façon, tout est assez délicat.


Oui, vous devez être patient pour réussir: D



1
votes

Il y a deux façons (2 et 3 sont similaires mais séparés en action):

  1. Réécriture de l'application (meilleur moyen mais difficile pour les applications volumineuses)
  2. Passage à un état hybride (par exemple, mise à niveau sans fourchette en ayant un application hybride de transition avec AngularJS et Angular 5). Voir AngularJS vers Angular5 - Mise à niveau d'un grand application
  3. Migration de chaque module sage. Voir Migration d'applications Angular 1 vers Le dernier Angular en 5 étapes simples

0 commentaires