Prerrequisitos

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

Dependencias

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

npm: desy-html
- Al instalar desy-html estamos añadiendo la dependencia de tailwindcss 3.0.24
npm: @angular/cdk

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í: 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 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 https://angular.io/api/router/ExtraOptions#anchorScrolling )

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>

Área de empleados públicos e Integradores

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

Prerrequisitos

Dependencias

Instalación

app.module.ts

app.module.ts

Configuración de router

Configuración de tailwindcss

tailwind.config.js

postcss.config.js

styles.css

index.html

tailwind.config.js

webpack.config.js

angular.json

styles.css

index.html

Related content