December 8, 2021 6 min to read

Angular 12!

Migración Angular 12

Buenasss como andan? Siii llegó otra migra, esta vez, toca surfear las olas hacia Angular 12! Como mencionamos en la migra anterior, Angular se actualiza con cierta frecuencia ver roadmap y para no perder ritmo, debemos actualizar nuestro código de a poquillo.

El post de hoy va dedicado a las experiencias durante una migración específica desde nuestro previo Angular 11 hacia Angular 12, con errores y warnings y sus respectivas soluciones!

Guía

Como guía podemos usar la oficial aquí. En este caso, no necesitamos ejercer ni realizar ninguna preparación previa del código para poder migrar. Por lo tanto, podemos arrancar nuestro first attemp desde nuestro repo con el comando de migración

    npx @angular/cli@12 update @angular/core@12 @angular/cli@12

Nota: Si te salta el warning de que las dependencias van a subir de version (a la 12), aplicá el mismo comando pero con --force

allowedNonPeerDependencies

En caso de que tengas alguna referencia de whitelistedNonPeerDependencies en tu repo, fueron deprecados y se reemplaza por: allowedNonPeerDependencies.

Karma

Si estas usando Karmita como test runner en tu projecto, necesitas ajustar la configuracion, ya que se deprecó el reporte coverage-istanbul-reporter

    npm uninstall karma-coverage-istanbul-reporter
    npm install karma karma-coverage

Y en karma.conf.js:

Reemplazamos

require('karma-coverage-istanbul-reporter') por -> require('karma-coverage');

coverageIstanbulReporter por -> coverageReporter.

Y el param reports por -> reporters.

Detalles: here.

PostCSS

PostCSS parece ser figurita repetida, esta vez puede que nos enfrentemos a la primer oleada:

    Unknown error from PostCSS plugin. Your current PostCSS version is **, but postcss-preset-env uses **. Perhaps this is the source of the error below.

Podés solucionarlo instalando manualmente la siguiente magia que será dependencia de éste:

    npm install autoprefixer@9.0.0 --save-dev

Si por esos rumbos de la vida, el problema persiste, acá te dejo otras soluciones alternativas.

SASS

BREAKING CHANGE ALERTTTTTTTTTTT! Mi amado y bello SASS, en este caso la migración que veo más recurrente respecto a la nueva versión 2.0 de SASS, es el tema con las divisiones. Se depreca la barra de división o slash div / y se reemplaza por la función matemática math.div() así y aquí mas info sobre math

El warning es: DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Otros breaking changes aparte del de la división (no me los crucé):

• Color units: funciones de colores más estrictas respecto a unidades
• Ajustes en la forma en la que trabaja el selector de extensión (@extend)
• Sintaxis de variables CSS para custom props

CSS

Para este caso, me topé con un warning que me llamó la atención y decía

end value has mixed support, consider using flex-end instead

La solución fue sencilla, en el archivo de estilos que estaba arrojando ese error, había un justify-content: end. Reemplazandolo por justify-content: flex-end (y teniendo el display: flex), se resuelve como aquí.

Buena pregunta… en este caso no necesitabamos el end de CSS, porque la intención era aplicar el de flexbox (ya existía el display flex). Tanto end como flex-end son válidos, sólo que el primero está bajo los poderes de nuestro CSS para alineaciones de cajas/boxes, y el segundo bajo el gobierno de flexbox y sus elementos. Acá toda la posta.

Tests

Tema tests muy poco! Si venis de la versión 11, casi no se necesita ajustar y tipear lo que ya se hizo en la versión anterior. Con lo único que me encontré en este caso fue con el caso del callback done():

    DEPRECATION: An asynchronous before/it/after function took a done callback but also returned a promise. This is not supported and will stop working in the future. Either remove the done callback (recommended) or change the function to not return a promise.

Simplemente ajusté los tests para evitar y remover ese callback innecesario.

Storybook

Siiii tenemos bonus y se trata de Storybook! Si en tu repo tenés instalado Storybook, vas a necesitar migrar a la versión 6.3.x de éste, para que sea compatible con Angular 12!

Lo más deseado de esta versión de SB es WEBPACK5!!! Lo cual nos va a abrir unas cuantas puertas hacia module federation (podemos detallarlo en otro post!).

Para instalar este webpack, agregar la prop core con webpack5 en main.js y otros cambios que puedas necesitar, te dejo el instructivo migratorio con los cambios en cada versión acá!

NX

Tema NX! Si lo estás usando, no habría nada crítico a resolver, solamente prestar muuuucha ATENCIÓN a los imports de la misma lib. Es decir, evitar por ejemplo importar en un archivo de @mylib, otro archivo de la misma lib con la misma nomenclatura de @mylib. Si ya existe en el mismo directorio, directamente usar el path relativo que corresponda y no el tag de NX @mylib.

BONUS!

Tema Lodash, podés encontrarte esta última olita:

    depends on 'lodash/fp'. CommonJS or AMD dependencies can cause optimization bailouts.
    For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Lo cual nos indica que Lodash no es un módulo de ECMAScript, y por eso el warning. Asi que lo ideal es reemplazarlo por la lib modularizada de ES lodash-es, instalando este pack como dependencia debería aplicar para el warning.

Salud amigos!