Angular Libraries

A new feature in Angular 6, libraries allow reusable code to be easily distributed among different projects.

Creating

Prerequisites:

• Angular 6
• Angular CLI @next (6.x.x)

To create a new library, run $ ng generate library <lib-name>. For our purposes, we'll create the hello-world library, which does nothing but provide a service that prints "hello, world!" to the console when it's constructed. To that end, we run $ ng generate library hello-world.

Angular will create a projects/ directory in the application's root directory, and inject some boilerplate code (mostly testing). Then, write the necessary code, whether it's copying and pasting an existing component or writing a small service. For our example, we're going to make these changes:

// projects/hello-world/src/lib/hello-world.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class HelloWorldService {

  constructor() {
      console.log('hello, world!');
  }
}

We then edit the public_api.ts file to make sure that our service is being exported properly:

// projects/hello-world/src/public_api.ts

/*
 * Public API Surface of hello-world
 */

export * from './lib/hello-world.service';

Building the library is simple as well. To build a given library, run $ npm build <lib-name> – for our example, we'd run $ npm build hello-world. If the library is not built using the previous commands, it will not be available for import in any application. Make sure to build the library.

Using

Using the library in the project is dead simple as well. In the main application, we can import it directly with a standard TS import: import { ... } from '<lib-name>'. Easy as that. From our example, we import HelloWorldService:

// src/app/app.component.ts

import { Component } from '@angular/core';
import { HelloWorldService } from 'hello-world';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';

  constructor(private service: HelloWorldService) { }
}

This will print "hello, world!" when $ ng serve is run.

Publishing to npm

Published packages should be restricted to the ITS scope. To that end, all packages published for ITS's use should be published with the @uiowa-its scope preceding the package name. For example, we would make the following change:

// projects/hello-world/package.json

{
    "name": "@uiowa-its/hello-world,
    ...
}

Note that, after this edit is made, you must re-build the project.

This way, we have a consistently maintained and visible package registry for everyone at ITS. Furthermore, this allows us our own cool scope name.

To publish:

1. Log into npm on your machine by running $ npm login. If you don't have an npm login, create one at www.npmjs.com and I'll add you to the @uiowa-its organization.
2. Check that the package is not marked as private (this feature will be added later).
3. Run $ npm publish --access=public.
4. Done!

Then, you can $ npm i @uiowa-its/<lib-name> and use it in your application just like any other npm package. If you want to, you can even install this package by running $ npm i @uiowa-its/hello-world and include it in your code with import { HelloWorldService } from '@uiowa-its/hello-world.