8

I've created and bundled an Angular (7.2.0) Library using the CLI:

ng g library MyLibrary

ng build MyLibrary

This gives me the my-libary.umd.js bundle that I need.

Currently, all dependencies are added as peerDependencies in the library package.json. What I would like to do is to actually bundle some dependencies with the library (.umd). Adding them as "dependencies" instead of "peerDependencies" does not seem to do the trick, I don't really see what the difference is?

How can I do that?

Example of package.json where ngx-spinner should be bundled

{
  "name": "demo-plugin",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^7.1.0",
    "@angular/core": "^7.1.0"
  },
  "dependecies": {
    "ngx-spinner": "^7.1.4"
  },
  "bundledDependencies": [
    "ngx-spinner"
  ]
}
Community
  • 1
  • 1
Thomas Schneiter
  • 1,103
  • 2
  • 19
  • 35

2 Answers2

10

What you want is to add it to bundledDependencies:

dependencies: NPM automatically installs them when someone else uses your library. Dependencies listed here also need to be whitelisted inside ng-package.json ("whitelistedNonPeerDependencies")

peerDependencies: The user of your library has to install the dependency (adding it to his own package.json)

bundledDependencies: The dependency will be bundled together with your library when building it. This will also bundle all transitive dependencies. If you want to stop this chain, you need to add the dependency which should not be bundled to peerDependencies. So for example if you want to bundle dependency A, which has a dependency on B, you get a bundle with A and B. If you don't want B bundled, you add it to the peerDependencies.

Each dependency you have should only appear in one of these at the same time. To bundle a dependency, you therefore need to add this dependency to the package.json of the root (not the library-package.json). What you should NOT do is run npm install inside the library folder. If you do npm install inside the library folder and don't have the bundled dependencies in the root package.json (and it's therefore missing from the root node_modules folder), you get a successful build, but the dependencies will not be included in the build (the cli should maybe hint at this ..).

Long story short, for your specific problem:

  1. Remove "ngx-spinner" from the "dependencies"-section of your library-package.json
  2. Remove the node_modules-folder inside your library (if you have one there)
  3. Add "ngx-spinner" as a dependency to your root-package.json
  4. Build the lib
dummdidumm
  • 4,828
  • 15
  • 26
  • This sounds like what i'm looking for.. but i can't get this to work. The .umd bundle still doesn't contain the dependency. I installed it as a dependency to the library package.json and then added it to the bundledDependencies array, no difference. – Thomas Schneiter Jun 03 '19 at 14:58
  • 1
    What is contained inside `bundledDependencies` should not be contained in `dependencies` or `peerDependencies`. For building it should make no difference though, so that's strange. Can you post the package.json and ng-package.json of your library? – dummdidumm Jun 04 '19 at 09:26
  • 1
    `bundledDependencies` expects just an array of strings and not package+version. So to define/install the dependency locally i've added it to `dependencies` and added the package name to the `bundledDependencies` array. I've added a simple example. I'm using `ng build` to create the .umd bundle – Thomas Schneiter Jun 04 '19 at 11:01
  • I am having this same problem. When I run `npm pack` I can see the dependencies packed inside node_modules, but when running `ng build` and generating the umd bundle files, the bundled dependency is not there. Help! – adrisons Jan 19 '21 at 10:03
  • @dummdidumm How does we import the package "ngx-spinner" if it is added via dependencies in target application? Do we need to use the library namespace or the "ngx-spinner" namespace? – Vimal Patel May 12 '21 at 14:40
  • This doesn't solve the initial problem: including 3-party dep into the final bundle explicitly. The ng-packgr repo (the tool the Angular uses to build libraries) [advises](https://github.com/ng-packagr/ng-packagr/issues/1836) to set up your own re-bundling process with the help of rollup: https://github.com/ng-packagr/ng-packagr/issues/1432. And what I'm thinking is why not to get rid of ng-packagr at all in favor of rollup in that case? – dhilt Dec 10 '21 at 04:40
1

I think what you are looking for is this: https://github.com/ng-packagr/ng-packagr/blob/HEAD/docs/dependencies.md#whitelisting-the-dependencies-section

whitelistedNonPeerDependencies

JohnnyDevNull
  • 951
  • 1
  • 8
  • 20
  • 1
    I've done that when adding `dependencies` but, this still does not bundle the dependencies. I don't see a difference in the bundle when doing that. – Thomas Schneiter Feb 20 '19 at 09:22