Migración de AngularJS a Angular7 a través de una aplicación híbrida
La tarea no es la más fácil, sino factible.
La encontré cuando me mudé a una nueva empresa.
El hecho de que es factible se puede encontrar en el
manual .
Fue creado específicamente para simplificar la transición sin la necesidad de crear un nuevo proyecto y reescribir cada componente desde el principio.
Tal como lo concibieron los desarrolladores, nuestro proyecto debería comenzar a funcionar tanto en AngularJS como en Angular, la nueva versión con un reemplazo gradual del código.
Entonces decidí hacerlo.
La guía es bastante detallada, pero básicamente contiene la parte teórica.
Para una persona que solía tratar principalmente con Vue, comprender de inmediato las complejidades de los marcos de organización no es tan simple.
La principal dificultad para mí fue que la estructura de los proyectos en AngularJS y Angular7 es diferente.
De ahí la necesidad de reescribir manualmente todas las dependencias, servicios y componentes.
De hecho, cualquier hibridación con este enfoque pierde su significado, ya que la aplicación en cualquier caso debe reescribirse por completo.
Así lo hice al principio, sin encontrar una manera menos costosa.
Sin embargo, hay una mejor opción.
Aquí encontré mucho útil.
Describiré en detalle lo que hice.
Necesitas crear un nuevo proyecto.
En Node.js:
npm install -g @angular/cliInstalar Angular a nivel mundial.
A continuación, debe crear una carpeta para la aplicación y acceder a ella a través de Node.js.
Los comandos principales que pueden ser necesarios aquí para encontrar la carpeta deseada:
cd _ y
cd .. para volver al directorio de arriba.
Entonces, cuando se encuentra la carpeta del proyecto, debe crear un proyecto en ella.
En Node.js escribimos:
ng new _En el proceso de creación del proyecto, se le ofrecerán varias opciones para la aplicación, donde deberá especificar los parámetros deseados.
Cuando se crea la aplicación, puede abrirla en el navegador con el comando:
ng serve --openSin embargo, todavía no hay nada que abrir.
Ahora necesita instalar las dependencias que son necesarias para que AngularJS y Angular funcionen:
npm install --save @angular/upgradeA partir de ahora, la aplicación es compatible con ambos marcos.
Ahora abra el proyecto anterior, busque el archivo package.json.
Enumera todas las dependencias necesarias para el funcionamiento de nuestra aplicación.
Deben instalarse manualmente.
Por ejemplo:
npm install --save angular @uirouter/angularjsDespués de este paso, puede transferir todos los estilos globales a la nueva aplicación.
Ahora transferimos todos los archivos desde la aplicación.
Para la orientación anterior, vamos más allá.
Cambiar el nombre del componente raíz.
En app.module.ts agrega la línea:
import * as angular from 'angular';
Esto no se indica en el manual, pero sin él no se puede lograr la hibridación.
Ahora tenemos una aplicación, que en teoría debería ser un híbrido.
En la práctica, pueden producirse varios errores en esta etapa, principalmente relacionados con dependencias, sobre los que escribiré en un artículo separado.
Si no surgen, continúe y cambie el módulo después del módulo AngularJS a Angular la versión deseada.
Este artículo proporciona una excelente representación visual de las principales diferencias entre el código de los dos marcos.
Paso a paso, y no tendrá una sola línea en AngularJS.