DEV Community

JWP
JWP

Posted on • Edited on

3

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

@Component({
  selector: 'lib-cmp2',
  template: `
    <p>
      cmp2 works!
    </p>
  `,
  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

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

Top comments (1)

Collapse
 
stanleynelson profile image
StanleyNelson

It is worth visiting page and many do-my-assignment.com/essay-writing... students can learn many new educational things here.I really liked your efforts of sharing this post. A good job is done. Thank you.

11 Tips That Make You a Better Typescript Programmer

typescript

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!