ng-package vs. package.json

#angular #typescript

If we hang around building libraries in Angular we're bound to run into how these two files work together.

If our library package.json looks like this:

package.json

{
  "name": "msd",
  "version": "0.0.5",
  ✔️"peerDependencies": {  
    "@angular/common": "^8.2.0",
    "@angular/core": "^8.2.0",
    "hammerjs": "^2.0.8",
    "install": "^0.13.0",
    "npm": "^6.14.5",
    "rxjs": "^6.5.5",
    "zone.js": "^0.9.1",
    "@fortawesome/angular-fontawesome": "^0.5.0",
    "@fortawesome/fontawesome-free": "^5.13.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.27",
    "@fortawesome/free-regular-svg-icons": "5.13.0",
    "@fortawesome/free-solid-svg-icons": "5.13.0"
  },
  ✔️"devDependencies": { 
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "^8.2.14",
    "@angular/compiler": "^8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/forms": "^8.2.14",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "^8.2.14",
    "@angular/platform-browser-dynamic": "^8.2.14",
    "@angular/router": "^8.2.14",
    "@microsoft/signalr": "^3.1.5"
  }
}

We have two sections of dependencies, peer and dev. If we compile our library and see this:

No name was provided for external module

We have to dig a bit deeper in understanding how the Angular (npm) Packager configuration can stop these messages.

ng-package.json

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/msd",
  "lib": {
    "entryFile": "src/public-api.ts",
    "umdModuleIds": {
      "@fortawesome/angular-fontawesome": "angularFontAwesome",
      "@fortawesome/free-solid-svg-icons": "freeSolidSvgIcons",
      "@fortawesome/free-regular-svg-icons": "freeRegularSvgIcons",
      "@microsoft/signalr": "signalr"
    }
  },
  "whitelistedNonPeerDependencies": ["@angular/*"]
}

If we think of the package.json being the front end pre-compile configuration, and the ng-package.json as the post compilation and interface to webpack we begin to see the relationship.

The whitelistedNonPeerDependcies are called out by the compiler errors, those errors tell us exactly what to put into the configuration file. Why? I don't know and right now don't care. I just want to focus on publishing the pacakge!

One last tip, we must always bump the pacakage.json version number each time we publish.

JWP 2020 NPM Publish, Package.Json Version, ng-package.json umdModuleIds