Build Angular npm package and publish it to npm server

How to build an angular library and serve on npm server?

1. create an Angular project
2. Edit package.json
   a. add "$schema":"./node_modules/ng-packagr/package.schema.json
   b. edit build script: "build": "ng-packagr -p package.json"
   c. add postbuild to script: "postbuild": "node-sass ./src/styles.scss ./dist/ab-input.css"
   d. add publish to script: "publish": "npm publish dist"
3. add ngPackage to package.json

"ngPackage": {
    "lib": {"entryFile": "public_api.ts"}
    }

1. remove "private": true from package.json
2. npm i -D ng-packagr

3. add file public_api.ts to root level directory

   export * from "./src/app/input.module";

4. add InputComponent to exports array in input.module.ts
5. register npm account
6. npm login
7. run commands in terminal

    npm run build
    npm run publish

Package.json

{
  "$schema": "./node_modules/ng-packagr/package.schema.json",
  "name": "ab-input",
  "version": "1.0.11",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port=8082",
    "build": "ng-packagr -p package.json",
    "postbuild": "node-sass ./src/styles.scss ./dist/ab-input.css",
    "publish": "npm run build && npm publish dist",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "author": {
    "name": "abby"
  },
  "ngPackage": {
    "lib": {
      "entryFile": "public_api.ts"
    },
    "whitelistedNonPeerDependencies": [
      "@angular/animations",
      "@angular/cdk",
      "@angular/common",
      "@angular/compiler",
      "@angular/forms",
      "@angular/core",
      "@angular/http",
      "@angular/platform-browser",
      "@angular/platform-browser-dynamic",
      "@angular/router",
      "primeng",
      "core-js",
      "rxjs",
      "tsickle",
      "zone.js"
    ]
  },
  "dependencies": {
    "@angular/animations": "~8.2.13",
    "@angular/common": "~8.2.13",
    "@angular/compiler": "~8.2.13",
    "@angular/core": "~8.2.13",
    "@angular/forms": "~8.2.13",
    "@angular/platform-browser": "~8.2.13",
    "@angular/platform-browser-dynamic": "~8.2.13",
    "@angular/router": "~8.2.13",
    "primeng": "^8.1.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.17",
    "@angular/cli": "~8.3.17",
    "@angular/compiler-cli": "~8.2.13",
    "@angular/language-service": "~8.2.13",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "ng-packagr": "^5.7.1",
    "node-sass": "^4.13.1",
    "protractor": "~5.4.0",
    "scss-bundle": "^3.0.2",
    "ts-node": "^7.0.1",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

public_api.ts

    export * from './src/app/input.module';

DONE.

How to use the new created package in new angular project?

1. In new angular project

    npm i -S ab-input

1. in angular.json add dependent styles

"styles": [
       "./node_modules/primeng/resources/themes/nova-light/theme.css",
       "./node_modules/primeng/resources/primeng.min.css",
       "./node_modules/ab-input/ab-input.css",
       "src/styles.less"
    ]

1. in app.module.ts

    import {InputModule} from 'ab-input'
    
   ...
   
    imports: [InputModule]
   ...

1. in app.component.ts delcare inputControl property

    inputControl = {
        model: "",
        type: "calendar",
        className: "user-name",
        controlName: "userName",
        placeholder: "user name",
        isRequired: true,
        pattern: "w"
    };

1. in app.component.html

    <app-input
        [(ngModel)]="inputControl.model"
        [name]="inputControl.controlName"
        [control]="inputControl"
        [required]="inputControl.isRequired"
        [email]="inputControl.type === 'email'"
        [pattern]="inputControl.pattern"
   ></app-input>