Using Angular Libraries in an Nx Monorepo

Shared Code

-Shared code by application

-Shared code between projects using libraries

Shared code by
application

Libraries y Monorepos

Where should my libraries live?

  • Monorepos
  • Repositories NPM

Shared code between projects

Libraries

PROS

  • Publish and share this libraries with other teams o projects

Libraries

CONS

  • Link your library to your main project and rebuild it for every change
  • You will need to keep syncing your project with the latest version of the library

Angular Monorepos

Monorepos are a source control pattern where essentially all the codebase lives in the same repository. All projects will always use the latest version of the code.

What is a Monorepo?

Angular Monorepos

PROS

  • Same library version for every app.
  • Ease of maintenance: when you update a shared library, you update it for all apps.
  • No conflicts between versions.

Be careful when using libraries

  • Every shared lib needs to have its own CI/CD pipeline.
  • Each CI/CD pipeline should handle versioning of changes.
  • Every time a new change happens in a shared repo, you need to go to all your projects using this library and update their npm packages.
  • There can be mismatches with different npm packages for angular projects.

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" />

Tutoriales

https://tinyurl.com/wt2kmqb

https://tinyurl.com/w5nv8pz

Made with Slides.com