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>