Creating an Angular NPM Service Library

Image by Bruno Habran from Pixabay

Updated Version

There’s an updated version of this article here:

Scenario

We need to publish a library to NPM for our peers.

Side Note

This should be a good way to package any NPM library as Angular supports all the popular package formats like FESM, UMD, etc. and does a good job of laying out your public API.

Approach

New Workspace

ng new my-workspace --create-application=false
cd my-workspace

New Library

ng generate library my-lib

Cleanup

Within my-lib/src/lib remove everything except for:

  • my-lib.service.ts

This is the only file that should be in public-api.ts :

/*
* Public API Surface of my-lib
*/
export * from './lib/my-lib.service';

Test Application

ng generate application libtest 
cd projects/libtest

Add the Library Service to Test Application

Note that this just works because of the workspace tsconfig.json configuration :

"paths": {
"my-lib": [ "dist/my-lib"
]}

So our application can just import the service into app.component.ts like this:

import { MyLibService } from 'my-lib';

Note though that if using VSCode then open up the entire workspace. This is such that the Tooling can see the tsconfig.json file and thus the path to the library.

To test that our application starts, from the root workspace run:

ng serve -o

Build the Library

First switch off Ivy in tsconfig.lib.json otherwise Angular will complain when attempting to publish to NPM:

"angularCompilerOptions": {    ...
"enableIvy": false
}

Then build the library:

ng build my-lib

Test NPM Publishing

Since this is just a test project we want to see what NPM would package for publishing, instead of actually publishing.

We can do this with:

cd dist/my-lib
npm pack

It will display what files are going to be uploaded and create a tar ball in the current directory.

We can also install this tarball into our test app like this (First we need to be in the workspace directory):

cd ../.. 
npm install my-lib

Look at the package.json file and notice that the my-lib library is now included via a file URL pointing at the tar ball:

"my-lib": "file:dist/my-lib/my-lib-0.0.1.tgz"

We can now develop our service further and when it’s ready to our first publish :

npm publish --access public

Brought to You By Firefly Semantics

Founder of Firefly Semantics Corporation

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

objects in javascript

3. Mobile to C++ with Djinni

Role Based Authorization for your Vue.js and Nuxt.js Applications Using vue-kindergarten

Storybook addons for CSS

Type-Level Finite-State Machines

https://youtu.be/JkRKT6T0QLg

Combining Default and Custom Options in Typescript

https://youtu.be/a8HWcmU-aIo

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation

More from Medium

Angular 13: Server Side Form Validations in Ant Design

Using Template-Driven Forms in Angular

How to customize Angular Material components

Exploring Bootstrap 5 with Angular — Creating Dropdown