Desarrollo: configuración y despliegue - local

Configuración nodejs

Hacemos doble click sobre el instalador descargado en https://nodejs.org/es/download/ , pulsamos sobre el botón de Ejecutar, Next en la siguiente pantalla y por ultimo aceptamos las condiciones de uso. En el siguiente paso nos aparecerá una pantalla donde podemos elegir la ruta en la que queremos instalar nodejs.

Elegimos la ruta que deseemos de nuestro equipo y pulsamos Next. En la siguiente pantalla nos aparecerán los diferentes elementos de nodejs que se nos van a instalar.

Pulsamos Next y a install, esperamos a que la instalación se complete y por último le damos a finish. Con esto tendremos nodejs instalado y añadido a nuestro path.

Configuración Angular Cli (https://cli.angular.io/ )

Angular CLI es la forma más cómoda para empezar a desarrollar aplicaciones web, móvil con Angular X, es una herramienta de línea de comandos que facilita la creación, generación, ejecución, testing y deploy.

Abrimos el cmd de windows y ejecutamos la siguiente instrucción

npm install -g @angular/cli@15

Una vez se ejecute, empezará a realizar una gran cantidad de descargas e instalaciones de paquetes. Es necesario tener un poco de paciencia y esperar a que termine.

Para actualizarlo:

npm uninstall -g @angular-cli
npm cache clean
npm cache verify
npm install -g @angular/cli@latest

Configuración IDE: Visual Studio Code

La solución de Visual Studio Code, puede ser la mas recomendable, ya que el plugin de eclipse consume mucha mas memoria. Para usar el Visual Studio Code accederemos a la siguiente URL:

https://code.visualstudio.com/

Descargaremos la versión instalable del programa o el .zip. Una vez se haya instalado veremos una pantalla similar a la siguiente imagen:

Importación del proyecto

Desde esta pantalla pulsaremos en File => Open Folder y seleccionaremos el directorio raíz del proyecto.
NOTA: Para poder realizar el autoimportado de los componentes es necesario instalar una extensión. Por lo que se deberá pulsar la tecla:

Ctrl + p

y escribir ext install auto-import pulsar la tecla enter y en el menú lateral de la izquierda aparecerá la extensión a instalar.

Ejecución de la aplicación

Para ejecutar la aplicación dentro del Visual Studio, puedes desplegar en el menú: Ver → Terminal Integrado

desy-html

Para compilar por primera vez el desy-html, escribir el siguiente comando:

npm install

Esperar con paciencia, que termine, luego ejecutaremos el siguiente comando:

npm run dev

desy-angular

Para compilar por primera vez el desy-angular, escribir el siguiente comando:

npm install

Después escribir el siguiente comando para construir la librería:

npm run build:lib

Esperar con paciencia, que termine, luego ejecutaremos el siguiente comando:

ng serve

Actualización a la última versión de desy-angular

Si estás trabajando con desy-angular y quieres actualizar la librería a su última versión, seguir los siguientes pasos

Para poder actualizar un proyecto a la versión de angular 15 y utilizar la versión 7.0 de desy angular hay que seguir estos pasos:

Utilizar una versión igual o superior a 16.17.1 de node.js
Siguiendo la guía, actualizar Angular a la versión 15 https://update.angular.io/?v=11.0-15.0.
1. Actualizar los paquetes cdk y material si es necesario.
Actualizar el paquete desy-angular a la versión 7.0.0
Actualizar la versión de desy-html a la versión 7.1.0
Actualizar el resto de paquetes (que no tengan que ver con angular ni typescript) a las últimas versiones.
Como TSLint está obsoleto hay que pasar la migración a ESLint usando la guía https://dev.to/phlashdev/angular-migrate-from-tslint-to-eslint-3dgc. En el apartado de instalación se debe contestar de manera afirmativa a las preguntas que te hacen. Para comprobar que todo está correcto y ESLint funciona, se lanza el último comando de la guía.
Instalar la versión 15 del paquete @angular-builders/custom-webpack. Para que esto funcione se debe eliminar el fichero postcss.config.js de la raíz del proyecto y en su lugar añadir un archivo webpack.config.js con los siguientes datos:

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

En el archivo angular.json sustituir los primeros componentes por los segundos:

"@angular-devkit/build-angular:browser"	"@angular-builders/custom-webpack:browser"
"@angular-devkit/build-angular:dev-server"	"@angular-builders/custom-webpack:dev-server"
"@angular-devkit/build-angular:karma"	"@angular-builders/custom-webpack:karma"
Añadir la ruta en el builder "@angular-builders/custom-webpack:browser" "customWebpackConfig": { "path": "webpack.config.js" }

8. Eliminar los paquetes "headroom.js”, "ngx-headroom", "@types/headroom.js"

9. Instalar el paquete "@ctrl/ngx-headroom"

10. Para que headroom funcione modificar el componente con headroom, eliminando la directiva Ngxheadroom y encapsulando el componente con <ngx-headroom> </ngx-headroom>

11. Dejar el archivo tailwind.config.js de la siguiente manera:

module.exports = {
  presets: [
    require('desy-html/config/tailwind.config.js')
  ],
  content: [
    './node_modules/desy-angular/**/*.{js,mjs,ts}',
    './src/**/*.{html,ts,css,js}'
  ]
};

Publicación

Librería desy-html

Cambiar a la rama master

Compilar el proyecto en modo producción:

npm run prod

Asegurarnos de que el proyecto se ve bien en el navegador.

Parar proceso con Ctrl+X

Librería desy-angular