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!
