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

Owned by Servicios Digitales de Aragón
Last updated: 02 Nov 2021
5 min read

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

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í: Bitbucket

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

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

(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

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

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

postcss.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
index.html

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

tailwind.config.js

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

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

webpack.config.js

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

angular.json

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
index.html