Angular: Dependencies and Versioning

Dependencies vs. DevDependencies vs. PeerDependencies vs. BundledDependencies vs. OptionalDependencies

Marius Schröder
Jul 4 · 4 min read

If you are new to Angular or custom component creation on Angular, you will come to a point where you have to decide between which level of dependency your custom component needs.

In Angular we have several options to declare dependencies for our components, which is done in the “package.json” (same file, where you declare the version number).

dependencies:

Dependencies which are declared as “normal” dependency in your component, are getting installed with the npm install call.

This is recommended when this dependency is absolutely necessary by your component or if you do not want the user to decide, if he wants to install the needed dependency.

devDependencies:

DevDependencies are exclusively needed for development only (for example testing packages). They will be automatically installed with the npm install call, unless you pass the

--production

flag.

Those packages are not installed transitively, which means that they don’t install other packages which are not necessarily needed.

You can use those dependencies for packages like linting-tools (static code analysis) or something else.

peerDependencies:

PeerDependencies are not installed transitively. If you declare a dependency as a peer dependency, this dependency will generate a warning if it is missing on the project. If you are running your app without this dependency (and it is really necessary for another dependency) you will get an error.

Otherwise, if it is a dependency which is actually not really necessary, it does not need to get installed. For example:

You have a custom component which uses a npm package for the icons to show. If this package is missing, the component could still work without the icons.

peerDependencies must be installed by yourself

bundledDependencies:

Basically the same functionality like normal dependencies, but the declared bundled dependencies will be packed and shipped with your component.

Good for ensuring the right version of a package or installing packages, which are not available in the npm registry.

optionalDependencies:

OptionalDependencies are more likely peer dependencies. npm will try to install those dependencies, but if the package is not found or fail to install, it will proceed with installing.

Example

The following example shows the initial “package.json” of a library project. @angular/common and @angular/core are declared as peerDependencies because they should be normally already installed in every angular project which include the new library.

package.json of sample library project

Versioning

For npm there are many opportunities to manage the accepted version of packages. Most common version identifiers are the caret (^), the tilde (~) or a constant version.

Versions are described by the v2.0.0 specification found at http://semver.org/.

The caret (^)

The caret operator allows to specify values depending on their leftmost non-zero number. It allows everything except major updates.

^1.2.3 → Everything up to Version 2.0.0 (exclusive)
^0.0.3 → Everything up to Version 0.0.4 (exclusive)

The tilde (~)

The tilde operator allows to specify minor level changes on patch level and is depending on the given version:

~1 → Between Version 1.0.0 and 2.0.0 (exclusive). It can also be written as 1.x
~1.2.3 → Between Version 1.2.3 and 1.3.0 (exclusive)

Addition:

It is also possible to append tags like “alpha”, “beta”, “rc” and it will be appended at the end of the version:

v1.2.3-beta
v1.2.3-beta.2

The order is:

1.0.0-alpha < 1.0.0-alpha.1 < 1.0.0-alpha.beta < 1.0.0-beta < 1.0.0-beta.2 < 1.0.0-beta.11 < 1.0.0-rc.1 < 1.0.0. (see https://semver.org/).

For more informations, I can highly recommend to take a look at https://docs.npmjs.com/misc/semver.

Conclusion

I recommend to use dependencies, devDependencies and peerDependencies. I am using dependencies for packages which are necessarily required by my application/component. DevDependencies are declared for things like the angular-cli. For things which should be available in the main project, which later includes my component, like @angular/common or @angular/core I am using peerDependencies.

Special thanks to Thomas Sebastian Jensen, which provided me with feedback for my first medium article.

Please feel free to provide feedback.

medialesson

We help our customers design, architect, develop and operate modern, intelligent, beautiful and usable apps on any platform powered by the Cloud, IoT and AI.

Thanks to Sebastian Jensen

Marius Schröder

Written by

Software Developer @ medialesson GmbH

medialesson

We help our customers design, architect, develop and operate modern, intelligent, beautiful and usable apps on any platform powered by the Cloud, IoT and AI.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade