Angular CLI 6: Where to put library dependencies
Angular CliAngular Cli-V6Angular Cli Problem Overview
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
?
Angular Cli Solutions
Solution 1 - Angular Cli
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 anode_modules/
directory in the root of your project, not within the library's directory (so only runnpm 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 thedependencies
and/orpeerDependencies
that users of your library will need. There is no point puttingdevDependencies
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"
}
}
Solution 2 - Angular Cli
It should be added in package.json
as peerDependencies
Solution 3 - Angular Cli
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
.
Solution 4 - Angular Cli
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.
Solution 5 - Angular Cli
The Dependencies are Added in package.json as peerDependencies under the package name