Prerrequisitos
Dependencias
Para utilizar desy-angular es necesario instalar previamente las siguientes librerías:
Puedes instalarlas mediante el comando npm install desy-html@8.12.1 @angular/cdk
Instalación
Después de instalar las dependencias anteriores, instale desy-angular través de:
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 {
}
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
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.
app-routing.module.ts
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.
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-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>
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-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 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>
