Npm Package Library with Demo app

In our previous article we showed how to create a library project. Now it's time to create an application and use our own NPM Published Library.

Create an application

We are going to create an Angular application within our library project named "demo". Its goal is to demonstrate the use of our new library "parts".

// from the projects folder
ng generate application demo

Demo Application Folder Structure*

This is what the internal folder structure looks like (a normal Angular application) within our multi-project scheme.

// we had not signed out of npm yet.
// but package names are required to be unique
// this means we are pulling from the free public side

cd demo
npm i projecty@0.0.1

Results in this:

Demo App Module

Demo App Component HTML

Serve the Demo App

// from the demo folder, we ran an init
// a lot of new installs happened

npm init 
ng serve

Summary
If we are building a component library that becomes an NPM Package, we want the demo application as well. In the demo we show how to use our library!

Other tests are important too, however, we didn't include that in this article.

We've also learned the the NG Module system is for Angular only. It follows the JavaScript module pattern but has nothing to do with it. The NG modules tell Angular how to load components, directive, pipes and inject-able items. The Angular runtime loader, jitter, compiler and render-er all work together to make this happen.

The number of json configuration files necessary for this is huge. It's easy to be confused. Over time the fog lifts to some degree but confusion is still bound to crop up.

Peer dependencies cause the messages after NPM Installs 'Peer dependencies detected,user is responsible for installing them'.

NPM Init after loading the NPM Install appeared to find all requirements of the library. We were surprised to see the number of packages installed.

JWP 2020 Angular Library Folder Structure