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
?
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"
}
}