Angular Libraries in 10 minutes

An Angular Library allows us to package components as a NPM Package. We install Node Packages via

npm i packagename 

We then import those packages in the app.module.ts. We use NPM packages all the time.

Create a Library Project

// Create a new folder named cmp with a projects folder.
ng new cmp --createApplication=false
cd cmp

// Generate a test component as an application
ng generate application test

// Generate our new library
ng generate library cmp2

This folder structure is created.

Notice the projects folder? When Angular libraries are created, it allows multiple projects to be created in the projects folder.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'lib-cmp2',
  template: `
    <p>
      cmp2 works!
    </p>
  `,
  styles: []
})
export class Cmp2Component implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

Import the Library Module

In the test application, open the app.module.ts and import the CM2Module from the new libarary.

Reusable Component

From this folder:

// Serve the application that consumes the libarary
..\cmp\projects> ng serve test

✔️Github Repo

Notes

• It might be worth it to ditch the traditional old way of creating Angular Projects. By doing it this way we have an immediate place to refactor anything needing to be reused.

• Our test application was just one example of another project within this "workspace". Theoretically, there's no limit.

Up Next: Adding Components.
JWP 2020 Angular Libraries