Prerequisitos

node.js 12.18.3+
Angular 11 (instalar mediante npm install -g @angular/cli)

Dependencias

desy-frontend 2.0.2 (instalar mediante npm install desy-frontend@2.0.2)
- Al instalar desy-frontend estamos añadiendo la dependencia de tailwindcss 2.0.1, junto con postcss y autoprefixer

Instalación

Después de instalar las dependencias anteriores, instale desy-angular través de:

npm install desy-angular

Una vez instalado, debe importar nuestro módulo principal en su módulo de aplicación:

app.module.ts

import { DesyAngularModule } from 'desy-angular';
 
@NgModule({
  declarations: [AppComponent, ...],
  imports: [DesyAngularModule, ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Si no se va a usar todos módulos de desy-angular, se puede instalar solo lo necesario de esta forma:

app.module.ts

import { DesyButtonsModule, DesyFormsModule, DesyNavModule, DesyTablesModule, DesyViewsModule, DesyModalsModule } from 'desy-angular';
 
@NgModule({
  declarations: [AppComponent, ...],
  imports: [DesyButtonsModule, DesyFormsModule, DesyNavModule, DesyTablesModule, DesyViewsModule, DesyModalsModule, ...],
  bootstrap: [AppComponent]
})
export class AppModule { }

Configuración de router

Para que funcionen correctamente los componentes de navegación (DesyNavModule) es necesario activar anchorScrolling en la configuración de router.

import { Routes, RouterModule, ExtraOptions } from '@angular/router';

const routes: Routes = [ ... ];

const routerOptions: ExtraOptions = {
  useHash: false,
  anchorScrolling: 'enabled',
  // ...any other options you'd like to use
};

@NgModule({
  imports: [RouterModule.forRoot(routes, routerOptions)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

(ver https://angular.io/api/router/ExtraOptions#anchorScrolling)

Configuración de tailwindcss

Desy-angular usa las clases css que nos aporta desy-frontend, haciendo uso de la librería tailwindcss. Para su correcto funcionamiento y visualización es recomendable la siguiente configuración.

Creamos el fichero tailwind.config.js mediante npx tailwindcss init y lo modificamos para utilizar la configuración de desy-frontend.

tailwind.config.js

/* Load Desy tailwindcss config */
const defaultConfig = require('./node_modules/desy-frontend/config/tailwind.config.js');

module.exports = {
  /* Use the Desy default config */
  ...defaultConfig,
  /* Change PurgeCSS files to add DESY AND this project's files */
  purge: {
    enabled: true,
    mode: 'layers',
    layers: [ 'base', 'components', 'utilities' ],
    content:[
      './node_modules/desy-angular/**/*.js',
      './src/**/*.html',
      './src/**/*.ts'
    ],
    options: {
      safelist: [
        'has-offcanvas-open',
        'has-dialog',
        'dialog-backdrop',
        'dialog-backdrop.active',
      ],
    }
  }
};

tarea purge

Es muy interesante ejecutar la tarea purge, sobre todo para entorno de producción, ya que minimiza el css dejando solo las clases css que usa el proyecto.

Instalamos como dependencia de desarrollo @angular-builders/custom-webpack y postcss-loader

npm install @angular-builders/custom-webpack postcss-loader --save-dev

Configuramos el custom-webpack, creando el fichero webpack.config.js en la carpeta raíz del proyecto:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, <--- Extensión del fichero styles
        use: [
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                ident: 'postcss',
                plugins: [
                  require('postcss-import'),
                  require('postcss-nested'),
                  require('tailwindcss'),
                  require('autoprefixer'),
                ],
              },
            }
          },
        ],
      }
    ],
  }
};

En nuestro angular.json modificamos el builder y agregamos la configuración.

angular.json

{
  ...
  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "webpack.config.js"
        },
        ...
      }
      ...
    },
    "serve": {
      "builder": "@angular-builders/custom-webpack:dev-server",
      "options": {
        "customWebpackConfig": {
          "path": "webpack.config.js"
        },
        ...
      }
      ...
    }
    "test": {
      "builder": "@angular-builders/custom-webpack:karma",
      "options": {
        "customWebpackConfig": {
          "path": "webpack.config.js"
        },
        ...
      }
      ...
    }
  }
  ...
}

Por ultimo, importaremos en nuestro styles.css los estilos de desy-frontend e importamos la fuente Open Sans en nuestro index.html

styles.css

@import 'desy-frontend/src/css/styles.css';

index.html

<!doctype html>
<html lang="es">
  <head>
      ...
      <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
  </head>
  <body>
     ...
  </body>
</html>

Área de empleados públicos e Integradores

desy-angular v2.0 - Manual de instalación

Prerequisitos

Dependencias

Instalación

app.module.ts

app.module.ts

Configuración de router

Configuración de tailwindcss

tailwind.config.js

tarea purge

webpack.config.js

angular.json

styles.css

index.html

Related content