@zabalit/zabal-core-app

Subir nuevo tag

Una vez actualizada la documentación con los últimos cambios en el CHANGELOD.md ejecutaremos

Actualizar tag antiguo

En caso de que queramos modificar un tag especifico ejecutamos

Quitar tag obsoleto

Para borrar un tag que no nos interesa mantener en git

Realizar link para testear

Ponemos en modo watch la librería para recompilar y realizar el enlace simbólico cada vez que se detecta un cambio

Desde el proyecto que queremos testearlo ejecutamos

Instalar en local

Realizamos el empaquetado del módulo

Desde el proyecto que queremos utilizarlo ejecutamos

Instalar desde Repo NPM

Realizamos el empaquetado y la subida al servidor NPM

Desde el proyecto que queremos utilizarlo ejecutamos

Estrctura de ficheros

├── assets
│   ├── i18n 
│   ├── imgs
│   └── svg
├── dist
├── node_modules
├── scripts
├── src
│   ├── components 
│   │   ├── presentation
│   │   └── smart
│   ├── constants
│   ├── directives
│   ├── enums
│   ├── guards
│   ├── helpers
│   ├── i18n
│   ├── interfaces
│   ├── resolvers
│   ├── services
│   │   └── base
│   ├── styles
│   └── utils
└── styles

• assets: contiene todos los estáticos comunes (Traducciones comunes. imágenes, svgs...)
• dist: Contiene los ficheros compilados mediante el comando tsc necesarios para utilizar el módulo común desde la aplicación
• node_modules: Contiene las dependencias del módulo común
• scripts: Contiene los scripts para automatizar las funcionalidades de creación de tags en git
• src:: Contiene el código fuente en typescript del módulo común. Esta carpeta se compilará en la carpeta dist. Se organiza de la siguiente manera:
  • components.modals: Componentes de tipo modal
  • components.presentation: Todos los componentes que no tengan dependencias de servicios y solo sirvan para presentar información.
  • components.smart: Componentes que tengan funcionalidades especificas y requieran de servicios comunes para poder funcionar
  • constants: Constantes comunes
  • guards: Servicios de tipo guard
  • helpers: Servicios especiales como por ejemplo los HttpInterceptors, los TranslateLoaders o Los servicios para menajear errores
  • i18n: Ficheros json con las traducciones comunes. Esta carpeta se copiará a la carpeta assets a la hora de realizar el build de la librería
• styles:: Contiene el código fuente de los css del módulo común. Esta carpeta se copiará a la carpeta assets a la hora de realizar el build de la librería

Usar el módulo

Añadir las peerDependencies del módulo común en la aplicación

Por cada módulo listado en zabal-core-app/package.json en la propiedad peerDependencies, ejecutar el comando de instalación en el directorio de la app. La versión instalada en la app deberá cumplir con la numeración definida en la librería, ya sea numeración variable, fija o por intervalos:

// En el Módulo App
import {ZabalCoreModule} from '@zabalit/zabal-core-app'; 

@NgModule({
  declarations: [
      // Declaraciones de la APP
  ],
  imports: [
        // Configuración del módulo
        BrowserModule,
        ZabalCoreModule.forRoot({
            ...
            ...ZABAL_CORE_MODULES,
            traduccionesApp: [
                {
                    clave: 'zabalComun',
                    ruta: 'zabal-core/i18n'
                }
            ],
            ...
        }),,
        AppRoutingModule
    ],
    bootstrap: [AppComponent],
    entryComponents: [
    ],
    providers: [
        ...ZABAL_CORE_PROVIDERS
    ]   
})
export class AppModule {}

// En el Módulo Shared
@NgModule({
    declarations: [
      // Declaraciones Compartidas
    ],
    imports: [
        ZabalCoreModule
    ],
    exports: [
        ZabalCoreModule
    ],
    providers: [
    ]
})
export class SharedModule {}

Añadimos los estilos CSS comunes en el fichero app.scss

@import "~@zabalit/zabal-core-app/styles/styles.css";

Añadimos los ficheros estáticos del módulo común (Traducciones, imágenes SVGs...).

En el fichero angular.json (Apartado assets) añadimos lo siguiente

{
    "glob": "**/*",
    "input": "node_modules/@zabalit/zabal-core-app/assets",
    "output": "zabal-core"
}

Utilizar recursos comunes

Para utilizar los recursos comunes desde cada aplicación

<!-- Utilizar una imágen -->
<img src="zabal-core/img/image.png">
<!-- Utilizar un SVG- -->
<ion-icon src="zabal-core/svg/prueba.svg"></ion-icon>

Utilizar traducciones comunes

Para utilizar las traducciones desde la aplicación tenemos que utilizar el prefijo 'zabalComun' seguido de la ruta del literal en el json

<div>{{'zabalComun.acciones.LOGIN' | translate}}</div>