September 15, 2021 3 min to read

Angular 11!

Migración a Angular 11

Buenasss como andan? Recientemente tuve que hacer algunas migraciones de Angular, por lo que me pareció podría ser útil e interesante para quienes deban llevar a cabo migraciones. Ahi les van los posibles errores y sus soluciones Angular se actualiza con cierta frecuencia ver roadmap y para no perder ritmo, debemos actualizar nuestro código en cada versión. El post de hoy va dedicado a una migración específica de Angular 10 hacia Angular 11.

Guía

Como guía podemos usar la oficial aquí. En este caso en particular, no se requiere ninguna preparación previa del código para poder migrar. Por lo que podemos arrancar desde nuestro repo con el comando de migración

    ng update @angular/core@11 @angular/cli@11

PostCSS

Si al momento de buildear (ng build –prod), te encontrás con el siguiente error:

> [object Object] is not a PostCSS plugin

Podés solucionarlo instalando manualmente el paquete que importa los archivos CSS:

    npm i postcss -D

Más info del issue aquí.

allowedNonPeerDependencies

Si en tu repo tenés referencias de whitelistedNonPeerDependencies, quedaron deprecadas y debés modificarlas por -> allowedNonPeerDependencies

Karma

Si estás usando Karma como test runner en tu proyecto, podrías necesitar modificar la configuración, ya que se deprecó el paquete coverage-istanbul-reporter.

Cambiamos de package:

    npm uninstall karma-coverage-istanbul-report
    npm install karma karma-coverage

Y en karma.conf.js lo siguiente:

Cambiamos el

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

coverageIstanbulReporter por -> coverageReporter Y el parámetro reportspor -> reporters

Referencia de estos cambios aquí.

Tests

Y siiiii, si venis migrando desde hace un tiempo habras notado que casi siempre hay que arreglar tests :D Esta vez no es la excepción PEEEERO tampoco hay que modificar tanto, si tenes algo de suerte… Un poco mas de restricciones en cuanto a tipados y sale con

Core-js

Si al momento de buildear (ng build –prod), te encontrás con este otro error:

Module not found: Error: Can’t resolve ‘core-js/es6/reflect’ in ‘C:\Users\User\Desktop\repos\core\src’ resolve ‘core-js/es6/reflect

Podes fijarte en el polyfills de angular, y los imports que tengas en tu proyecto, para pasar de estos:

import 'core-js/es6/array'; import 'core-js/es7/array';

a estos: import 'core-js/es/array';

Nota: modificamos sólo la primer parte (core-js/es)

Si el error persiste, puede que tengas que modificar la versión del paquete de core-js. En mi caso actualicé de la versión 2.6.12 a la 3.6.5.

Typescript

Si te encontrás con error de versionado del TS, deberías actualizarlo también. En mi caso, actualicé del 3.9.9 al 4.1.5.

    npm i -D typescript@4.1.5

Bonus!

Si por casualidad tenias como dependencia el paquete @angular-devkit/build-ng-packagr, también se deprecó y sólo necesitarías este: @angular-devkit/build-angular, asi que podrias desinstalarlo y quitarlo del package.json, manteniendo únicamente el @angular-devkit/build-angular. Paquete deprecado aca

Post cortito y al pie, pero que espero pueda serles de utilidad!