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

...

Al actualizar a la versión 67.0 de desy-angular la integración actual con la librería se verá afectada. Por ello, para actualizar a la versión 67.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

   Code Block
   npm install desy-angular@7.0.0

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

...

1. 7.

...

1. 1.0

   Code Block
   npm install desy-

...

1. html@7.1.0

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

3. Como TSLint está obsoleto hay que pasar la migración a ESLint usando la guía https://dev.to/phlashdev/angular-migrate-from-tslint-to-eslint-3dgc. 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.

4. 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:

Code Block
module.exports = { module: { rules: /* Use the Desy default config */ presets: [require('desy-html/config/tailwind.config.js')], /* contenido a purgear*/ content:[ './node_modules/desy-angular/**/*.js', './src/**/*.html', './src/**/*.ts' ] };

En caso de estar usando desy-html/config/clean-css.js este archivo ya no existe actualmente en desy-html.

Uso de componentes

...

Módulo

...

Componente

...

Cambios

...

DesyButtonsModule

...

...

• No es necesario aplicar cambios

...

DesyFormsModule

...

• No es necesario aplicar cambios

...

DesyModalsModule

...

...

• No es necesario aplicar cambios

...

DesyNavModule

...

...

• No es necesario aplicar cambios

...

DesyTablesModule

...

 TableAdvancedComponent

...

• Se añade subcomponente desyContent a TableAdvancedHeaderCell, por lo que el contenido a mostrar debe ir dentro en esta etiqueta obligatoriamente, de lo contrario, esté no se mostrará

...

DesyViewsModule

...

 tabsComponent

...

• Asegurarse de tener la versión 6.2.1 de desy-html ya que usar otras versiones puede causar problemas en los estilos.

...

DesyPaginationModule

...

[
      {
        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:

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}'
  ]
};