USANDO LIBRERÍAS EN UN ANGULAR NX MONOREPO

Codigo Compartido

-Codigo compartido por app

-Codigo compartido en proyectos con librerías

Codigo compartido
por app

Librerías y Monorepos

Dónde pueden vivir Librerías?

  • Monorepos
  • Repositorio NPM

Codigo compartido en projectos

Librerías

Lo bueno

  • Publica y comparte estas librerías con otros equipos o proyectos.

Librerías

Lo malo

  • Actualiza tu proyecto con la versión nueva de tu librería
  • Mantener tu proyecto actualizado con la ultima version de la librerías

Angular Monorepos

Monorepos es una forma de construir aplicaciones donde todo tu código vive bajo el mismo repositorio. Todos tus proyectos van a utilizar las misma version de código.

Qué es un Monorepo?

Angular Monorepos

  • La misma version de librerías para todas las apps
  • Facil de mantener tus aplicaciones que utilizan librerías
  • No conflictos entre tus versiones de librerías

lo bueno

Cuidado usando librerías

  • Cada librerías debe tener su CD/CI individual
  • Cada CI/CD debería manejar las versión de la librerías
  • Asegurase que utilizas la version correcta de la librería

Interface de los Post

En tu linea de comando

nx g @nrwl/workspace:lib post

Ve a libs/post/src/lib/post.ts

export interface Post {
    id: string;
    title: string;
    author: string;
    description: string;
    imageUrl: string;
}

Creando una biblioteca de UI

nx g @nrwl/angular:lib ui

Un componente

en la biblioteca

nx g component posts --project=ui --export

ui.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PostsComponent } from './posts/posts.component';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [CommonModule, RouterModule],
  declarations: [PostsComponent],
  exports: [PostsComponent],
})
export class UiModule {}

Usando la libreria UI

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { PostDetailsComponent } from './post-details/post-details.component';
import { PostsPageComponent } from './posts-page/posts-page.component';

/**
 * UI Lib Module
 */
import { UiModule } from '@ngconf/ui';
@NgModule({
  declarations: [AppComponent, PostDetailsComponent, PostsPageComponent],
  imports: [BrowserModule, AppRoutingModule, HttpClientModule, UiModule ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Usando el componente
de la libreria

<div class="content" *ngIf="posts$ | async as posts">
    <ngconf-posts [posts]="posts"></ngconf-posts>
</div>

Creando un servicio en
nuestra libreria

nx g s blog --project=ui

El archivo index.ts

export * from './lib/ui.module';
export * from './lib/blog.service';

Activos compartidos

Activos Compartidos

"assets": [
              "apps/blog/src/favicon.ico",
              "apps/blog/src/assets",
              {
                "glob": "**/*",
                "input": "./libs/shared-assets",
                "output": "./assets"
              }
            ],
    <img src="../assets/images/ngconfco.png" />

Angular.io en Español

AngularHispana

devpato

Tutoriales

https://tinyurl.com/wt2kmqb

https://tinyurl.com/w5nv8pz

Nx Libs - NgConf

By Patricio Vargas

Made with Slides.com

Nx Libs - NgConf

  • 150

More from Patricio Vargas