/
desy-angular v11.0 - Manual de instalación

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

Prerrequisitos


Dependencias


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

Puedes instalarlas mediante el comando npm install desy-html@8.11.0 @angular/cdk

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í: https://bitbucket.org/sdaragon/desy-angular-starter/

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 y el módulo BrowserAnimationsModule en su módulo de aplicación:

app.module.ts
import { DesyAngularModule } from 'desy-angular'; @NgModule({ declarations: [AppComponent, ...], imports: [DesyAngularModule, BrowserAnimationsModule, ...], 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 Angular )

 

Configuración de tailwindcss

Desy-angular usa las clases css que nos aporta desy-html, 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-html.

tailwind.config.js
module.exports = { /* 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' ] };

 

Configuración de postcss

Instalamos como dependencia de desarrollo postcss-loader

npm install postcss-loader --save-dev

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

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

 

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

styles.css
@import 'tippy.js/dist/tippy.css'; @import 'desy-html/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>

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

tailwind.config.js
module.exports = { /* 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' ] };

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$/, use: [ { loader: 'postcss-loader', options: { postcssOptions: { ident: 'postcss', plugins: [ require('postcss-import'), require('tailwindcss'), require('tailwindcss/nesting'), require('autoprefixer'), ], }, } }, ], } ], } };

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

styles.css
@import 'tippy.js/dist/tippy.css'; @import 'desy-html/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>

Related content