Angular Nx Tutorial - Step 8: Create Libs

Libraries are not just a way to share code in Nx. They are also useful for factoring out code into small units with a well-defined public API.

Public API

Every library has an index.ts file, which defines its public API. Other applications and libraries should only access what the index.ts exports. Everything else in the library is private.

UI libraries

To illustrate how useful libraries can be, create a library of Angular components.

Use the generator to scaffold a new library:

npx nx g @nrwl/angular:lib ui

You should see the following:

myorg/
├── apps/
│   ├── todos/
│   ├── todos-e2e/
│   └── api/
├── libs/
│   ├── data/
│   └── ui/
│       ├── src/
│       │   ├── lib/
│       │   │   └── ui.module.ts
│       │   ├── index.ts
│       │   └── test-setup.ts
│       ├── .eslintrc.json
│       ├── jest.config.js
│       ├── project.json
│       ├── tsconfig.json
│       ├── tsconfig.lib.json
│       └── tsconfig.spec.json
├── tools/
├── .eslintrc.json
├── nx.json
├── package.json
└── tsconfig.base.json

The libs/ui/src/lib/ui.module.ts file looks like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [CommonModule],
})
export class UiModule {}

Add a component

Add a component to the newly created ui library by running:

npx nx g component todos --project=ui --export

myorg/
├── apps/
│   ├── todos/
│   ├── todos-e2e/
│   └── api/
├── libs/
│   ├── data/
│   └── ui/
│       ├── src/
│       │   ├── lib/
│       │   │   ├── todos/
│       │   │   │   ├── todos.component.css
│       │   │   │   ├── todos.component.html
│       │   │   │   ├── todos.component.spec.ts
│       │   │   │   └── todos.component.ts
│       │   │   └── ui.module.ts
│       │   └── index.ts
│       ├── .eslintrc.json
│       ├── jest.config.ts
│       ├── tsconfig.json
│       ├── tsconfig.lib.json
│       └── tsconfig.spec.json
├── tools/
├── nx.json
├── package.json
└── tsconfig.base.json

Add a todos input to libs/ui/src/lib/todos/todos.component.ts.

import { Component, OnInit, Input } from '@angular/core';
import { Todo } from '@myorg/data';

@Component({
  selector: 'myorg-todos',
  templateUrl: './todos.component.html',
  styleUrls: ['./todos.component.css'],
})
export class TodosComponent implements OnInit {
  @Input() todos: Todo[] = [];

  constructor() {}

  ngOnInit() {}
}

And update todos.component.html to display the given todos:

<ul>
  <li *ngFor="let t of todos" class="todo">{{ t.title }}</li>
</ul>

Use the UI library

Now import UiModule into apps/todos/src/app/app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { UiModule } from '@myorg/ui';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule, UiModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

And update app.component.html:

<h1>Todos</h1>

<myorg-todos [todos]="todos"></myorg-todos>

<button (click)="addTodo()">Add Todo</button>

Restart the api and application in separate terminal windows

npx nx serve api

npx nx serve todos

What's Next

Continue to Step 9: Using the Project Graph