angular-cliangular-cli-v6

Angular CLI 6: Where to put library dependencies


I'm converting a library (ng-app-state) to use the angular cli, now that v6 supports libraries (yay!).

After scaffolding and copying in some code, here is my first question:

How/where do I add 3rd party dependencies?

To package.json, or to projects/ng-app-state/package.json?


Solution

  • Turns out the answer is kind of "both". Understanding the answer comes from this:


    That is the full answer. Read on to see an example.

    In my case package.json has a long list of many dependencies and devDependencies (you can see it here), but all of this only effects me (and anyone who wants to contribute to ng-app-state). projects/ng-app-state/package.json is much smaller, and this is what affects users of my library:

    {
      "name": "ng-app-state",
      "version": "8.0.0",
      "author": "Simonton Software",
      "license": "MIT",
      "repository": "simontonsoftware/ng-app-state",
      "peerDependencies": {
        "@angular/common": ">=6.0.0 <7.0.0",
        "@angular/core": ">=6.0.0 <7.0.0",
        "@ngrx/store": ">=6.0.0 <7.0.0",
        "micro-dash": ">=3.5.0 <4.0.0"
      }
    }
    

    After running ng build np-app-state --prod to generate what will be released to npm, this is what ends up in dist/ng-app-state/ (which is what should be published):

    {
      "name": "ng-app-state",
      "version": "8.0.0",
      "author": "Simonton Software",
      "license": "MIT",
      "repository": "simontonsoftware/ng-app-state",
      "peerDependencies": {
        "@angular/common": ">=6.0.0 <7.0.0",
        "@angular/core": ">=6.0.0 <7.0.0",
        "@ngrx/store": ">=6.0.0 <7.0.0",
        "micro-dash": ">=3.5.0 <4.0.0"
      },
      "main": "bundles/ng-app-state.umd.js",
      "module": "fesm5/ng-app-state.js",
      "es2015": "fesm2015/ng-app-state.js",
      "esm5": "esm5/ng-app-state.js",
      "esm2015": "esm2015/ng-app-state.js",
      "fesm5": "fesm5/ng-app-state.js",
      "fesm2015": "fesm2015/ng-app-state.js",
      "typings": "ng-app-state.d.ts",
      "metadata": "ng-app-state.metadata.json",
      "sideEffects": false,
      "dependencies": {
        "tslib": "^1.9.0"
      }
    }