AppscatterUiMicroComponentLibrary

This project's aim is to store reusable, versionable components that can be packaged and shared (privately) via NPM.

Pre-reqs

Install ng-packager

• npm install (it's in package.json otherwise npm install ng-packagr --save-dev)
• It's already declared as adevDependency

How to create a npm-able packaged component

Create a module/component (normal Angular stuff via CLI)

1. cd to root and use the CLI to initialise a new module:

• ng generate module modules/<your_MODULE_name>
  • Creates:
  • header.component.css
  • header.component.html
  • header.component.spec.ts
  • header.component.ts
  • header.module.ts

2. Create the component (a module can have multiple components!) ng generate component modules/<your_MODULE_name>/<your_COMPONENT_name>
3. Open the module ts file <your_MODULE_name>.module.ts and add an exports array to the @NgModule block: exports: [ YourComponentName ]

Make it NPM-able via ng-packagr

4. Important! CD into the module's folder and configure the scope so that the package will be private (otherwise anyone can download via npm!) npm init --scope=appscatter It is vital that you leave the name as is (the @appscatter/ marks it as private)
5. Make sure your module can be exported in public_api.ts: export * from './src/app/modules/<your_MODULE_name>/<your_COMPONENT_name>.module'
6. Package the modules/components: npm run packagr (run in root)

• This builds packages into the /dist directory. Packages here are fully self sufficient & packaged according to best practices; they can be used as per any typical npm install abc-123 package!

7. cd to /dist and run npm pack. This will create <your_COMPONENT_name>-0.0.0.tgz. (The 0.0.0 part comes from the component's package.json).

Publish it on npm

1. If not logged in to NPM via terminal, do so:

• npm login

2. Publish it!

• npm publish

ng-packagr / behind the scenes

Root level ng-package.json configures n-packagr, specifically where to find public_api.ts

{ "$schema": "./node_modules/ng-packagr/ng-package.schema.json", "lib": { "entryFile": "public_api.ts" } }

Root level package.json contains a packager script that we can use to tell ng-packagr to package our libraries according to the configuration of ng-package.json.Note that private is set to false to allowing library publication.

"scripts": { ... "packagr": "ng-packagr -p ng-package.json" }, "private": false

Useful angular-specific stuff:

This project was generated with Angular CLI version 6.0.8.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.