72

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?

Sunil Garg
  • 14,608
  • 25
  • 132
  • 189
Eric Simonton
  • 5,702
  • 2
  • 37
  • 54

5 Answers5

69

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

  • package.json is what will be used during development. You actually install all your libraries here for your own use, including the ones that users will also need. You should only have a node_modules/ directory in the root of your project, not within the library's directory (so only run npm install and similar here).
  • projects/ng-app-state/package.json is what will be deployed to npm (with some additional fields added by the build process). So copy in the dependencies and/or peerDependencies that users of your library will need. There is no point putting devDependencies here.

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"
  }
}
Eric Simonton
  • 5,702
  • 2
  • 37
  • 54
  • So, I will install the dependency on the root folder(the application itself, as there is only one `node_modules`), and I will copy the line `"materialize-css": "^1.0.0"` to **projects/project-name/package.json** under `peerDependencies`? – Sunil Garg Dec 26 '18 at 09:27
  • If it should be a peer dependency for your users, then yes, exactly. – Eric Simonton Dec 30 '18 at 16:49
  • 1
    If i am using bootstrap scss mixins and all in the library , how can i bootstrap to the library? – Janier Jan 22 '19 at 00:04
  • 2
    Clear as mudd. Where's the documentation for precisely what goes in the library package.json? – Rick O'Shea Feb 17 '19 at 01:54
  • It's funny that everyone makes their own angular + materialize-css library and no real open source candidate emerges for their v1.0.0. I'll try to make one on my own for my company and share it if it works well enough. – Leogout Mar 22 '20 at 18:37
  • So what do you do when you run `npm install` from the root and don't get what the users need. Then you can build it with `ng build` but you can't test it with `ng test`.. that seems extremely silly. – Evan Carroll Aug 05 '21 at 15:28
16

It should be added in package.json as peerDependencies

Jagan
  • 422
  • 3
  • 10
  • 1
    [Since `peerDependencies` aren't installed automatically by npm](https://docs.npmjs.com/files/package.json#peerdependencies), wouldn't this mean I'd have to manually install all the module's dependencies in my app after importing the module from NPM? – Nathan Friend May 11 '18 at 12:25
  • 2
    @NathanFriend, yes you have to. That's exactly what lib's `peerDependencies` points to - please install the following dependencies in order to use the library. – Jagan May 14 '18 at 13:23
  • Okay, I have installed dependency like: npm install lodash, then how to import this to pipe file(component)? – POV Oct 24 '18 at 21:56
  • in order to having the library´s 3º party dependencie automatically installed you can add it as a dependencie and in ng-package.json include this property so that ng-packagr let the build process continue. "whitelistedNonPeerDependencies": [ "fortawesome" ], – Jmainol Nov 17 '20 at 19:05
2

No One Knows, yet.

I'm not sure this information is out there anywhere. I've filed an issue on the bug tracker and it's passed triage. I believe they'll be documented in the future.

Right now to the best of my understanding, it could be said that 100% of all Angular Dependencies that are not core related that are in a project in a workspace, must also be in the workspace. They must be in the project so the end-user knows they're required as that'll get bundled in the dist. They must be in the workspace's package.json so they're actually installed in development with ng build and ng test.

Kiron Paul
  • 187
  • 2
  • 7
Evan Carroll
  • 78,363
  • 46
  • 261
  • 468
0

The 3rd party dependencies should be placed in dependencies of projects/ng-app-state/package.json

However if the 3rd party dependencies also support ng 6 then you have a different question and more complexity beyond the scope of this question. I will briefly say that you may have to call ng update on their libraries or develop schematics that call theirs which expect their ng 6 version of library being present.

bhantol
  • 9,368
  • 7
  • 44
  • 81
  • in order to having the library´s 3º party dependencie automatically installed you can add it as a dependencie and in ng-package.json include this property so that ng-packagr let the build process continue. Here the explanation: https://medium.com/@aselvini/im-a-newbe-about-this-topic-and-i-got-the-same-issue-47b3116373ea "whitelistedNonPeerDependencies": [ "fortawesome" ], – Jmainol Nov 17 '20 at 19:07
  • this will not work for building or testing. – Evan Carroll Aug 05 '21 at 15:59
0

The Dependencies are Added in package.json as peerDependencies under the package name

Virus
  • 171
  • 2
  • 11