DEV Community

John Peters
John Peters

Posted on • Updated on

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 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

This folder structure is created.

Alt Text

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';

  selector: 'lib-cmp2',
  template: `
      cmp2 works!
  styles: []
export class Cmp2Component implements OnInit {

  constructor() { }

  ngOnInit(): void {
Enter fullscreen mode Exit fullscreen mode

Import the Library Module

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

Alt Text

Reusable Component

Alt Text

From this folder:

// Serve the application that consumes the libarary
..\cmp\projects> ng serve test
Enter fullscreen mode Exit fullscreen mode

✔️Github Repo

Alt Text


  • 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

Top comments (1)

stanleynelson profile image

It is worth visiting page and many students can learn many new educational things here.I really liked your efforts of sharing this post. A good job is done. Thank you.