Prerequisitos

...

node.js 12.18.0+
Angular 11 (instalar mediante npm install -g @angular/cli@^11.0.0, o bien npm install -g @angular/cli@^11.0.0 para instalar globalmente)

Dependencias

...

Para utilizar desy-angular es necesario instalar previamente las siguientes librerías:

...

Puedes instalarlas mediante el comando npm install desy-frontend@4.1.1 @angular/cdk@^11.0.0

Instalación

...

Info
Si vas a crear un proyecto desde 0, puedes tomar el proyecto desy-angular-starter como punto de partida. Este proyecto viene con desy-angular configurado y listo para utilizarse. Puedes encontrarlo aquí: https://bitbucket.org/sdaragon/desy-angular-starter/

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

Code Block

language	bash

npm install desy-angular

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

app.module.ts

Code Block

language	js

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

Expand

title	Instalación de un modulo específico

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

app.module.ts

Code Block

language	js

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.

Expand

title	app-routing.module.ts

Code Block

language	js

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.

Expand

title	Pasos de la configuración para versiones de angular compatibles con la versión 11.2.0

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

tailwind.config.js

Code Block

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

Info

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.

Configuración de postcss

Instalamos como dependencia de desarrollo postcss-loader

Code Block

language	bash

npm install postcss-loader --save-dev

Creamos el fichero postcss.config.js en la carpeta raíz del proyecto:

postcss.config.js

Code Block

language	js

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting'),
    require('tailwindcss'),
    'has-dialog',
        'dialog-backdrop',
  require('autoprefixer'),
  ]
}

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

styles.css

Code Block

language	css

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

index.html

Code Block

language	xml

<!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>

Expand

title	Pasos de la configuración para versiones de angular anteriores a la 11.2.0

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

tailwind.config.js

Code Block

language	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:[
     'dialog-backdrop.active',
  './node_modules/desy-angular/**/*.js',
      './src/**/*.html',
      'focus',./src/**/*.ts'
    ],
    options: {
      safelist: [
        'dev'
      ],
    }
  }
};

Info

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

Code Block

language	bash

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

Code Block

language	js

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

Note
En el atributo `test: /\.css$/,` se debe especificar la extensión del fichero styles en tailwind.

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

angular.json

Code Block

language	js

{
  ...
  "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 tippy y desy-frontend e importamos la fuente Open Sans en nuestro index.html

styles.css

Code Block

language	css

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

index.html

Code Block

language	xml

<!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>

Versions Compared

Old Version 2

New Version Current

Key

Prerequisitos

Dependencias

Instalación

app.module.ts

app.module.ts

Configuración de router

Configuración de tailwindcss

tailwind.config.js

tarea purge

postcss.config.js

styles.css

index.html

tailwind.config.js

tarea purge

webpack.config.js

angular.json

styles.css

index.html

Page Comparison

Versions Compared

Old Version 2

New Version Current

Key

Dependencias

Instalación

app.module.ts

app.module.ts

Configuración de router

Configuración de tailwindcss

tailwind.config.js

tarea purge

postcss.config.js

styles.css

index.html

tailwind.config.js

tarea purge

webpack.config.js

angular.json

styles.css

index.html