desy-angular v7.0 - Manual de actualización

Owned by Servicios Digitales de Aragón
Last updated: 17 May 2023
3 min read

A continuación se describen los pasos a seguir para actualizar hasta la versión más reciente de desy-angular.

Modificaciones desde versión 6.0 hasta versión 7.0

Para actualizar desde versiones anteriores será necesario seguir los pasos descritos en el manual de actualización de la versión 5.0: desy-angular v6.0 - Manual de actualización

Al actualizar a la versión 7.0 de desy-angular la integración actual con la librería se verá afectada. Por ello, para actualizar a la versión 7.0.0 sin alterar la funcionalidad, es necesario aplicar las siguientes modificaciones:

Configuración

  1. Utilizar una versión igual o superior a 16.17.1 de node.js

  2. Siguiendo la guía, actualizar Angular a la versión 15 https://update.angular.io/?v=11.0-15.0.

    1. Actualizar los paquetes cdk y material si es necesario.

  3. Actualizar el paquete desy-angular a la versión 7.0.0

    npm install desy-angular@7.0.0

  4. Actualizar la versión de desy-html a la versión 7.1.0

    npm install desy-html@7.1.0

  5. Actualizar el resto de paquetes (que no tengan que ver con angular ni typescript) a las últimas versiones.

  6. Como TSLint está obsoleto hay que pasar la migración a ESLint usando la guía Angular: Migrate from TSLint to ESLint. En el apartado de instalación se debe contestar de manera afirmativa a las preguntas que te hacen. Para comprobar que todo está correcto y ESLint funciona, se lanza el último comando de la guía.

  7. Instalar la versión 15 del paquete @angular-builders/custom-webpack. Para que esto funcione se debe eliminar el fichero postcss.config.js de la raíz del proyecto y en su lugar añadir un archivo webpack.config.js con los siguientes datos:

module.exports = { module: { rules: [ { test: /\.css$/, use: [ { loader: 'postcss-loader', options: { postcssOptions: { ident: 'postcss', plugins: [ require('postcss-import'), require('tailwindcss/nesting'), require('tailwindcss'), require('autoprefixer'), ], }, } }, ], } ], }, watchOptions: { ignored: /node_modules/, }, };

 

En el archivo angular.json sustituir los primeros componentes por los segundos:

"@angular-devkit/build-angular:browser"

"@angular-builders/custom-webpack:browser"

"@angular-devkit/build-angular:dev-server"

"@angular-builders/custom-webpack:dev-server"

"@angular-devkit/build-angular:karma"

"@angular-builders/custom-webpack:karma"

Añadir la ruta en el builder "@angular-builders/custom-webpack:browser"

 "customWebpackConfig": {

              "path": "webpack.config.js"

  }  

 

8. Eliminar los paquetes "headroom.js”, "ngx-headroom", "@types/headroom.js"

9. Instalar el paquete "@ctrl/ngx-headroom"

10.  Para que headroom funcione modificar el componente con headroom, eliminando la directiva Ngxheadroom y encapsulando el componente con <ngx-headroom> </ngx-headroom>

11. Dejar el archivo tailwind.config.js de la siguiente manera:

module.exports = { presets: [ require('desy-html/config/tailwind.config.js') ], content: [ './node_modules/desy-angular/**/*.{js,mjs,ts}', './src/**/*.{html,ts,css,js}' ] };