DEV Community

Vineeth.TR
Vineeth.TR

Posted on

Angular Library Dependencies vs PeerDependencies

Dependencies serve many different purposes. Some dependencies are needed to build your project, others are needed when youโ€™re running your program.

Dependencies

The libraries under dependencies are those that your project really needs to be able to work in production. Usually, these libraries have all or part of their code in your final bundle(s).

npm install MY_PACKAGE
Enter fullscreen mode Exit fullscreen mode

or

yarn add MY_PACKAGE
Enter fullscreen mode Exit fullscreen mode

Adding package dependencies on Angular Library project.

1. Root package.json

Make sure your package added on root package.json dependencies section.

....
  "dependencies": {
      ...
      "MY_PACKAGE": "VERSION"
}
Enter fullscreen mode Exit fullscreen mode

2. Project package.json

The same package should add on the Angular Library project package.json dependencies section also.

....
  "dependencies": {
      ...
      "MY_PACKAGE": "VERSION"
}

Enter fullscreen mode Exit fullscreen mode

3. Project ng-package.json

Package name should added on the Angular Library project ng-package.json allowedNonPeerDependencies array section.

....
  "allowedNonPeerDependencies": [
      "MY_PACKAGE"
]

Enter fullscreen mode Exit fullscreen mode

PeerDependencies

You want to create and publish your own Angular Library so that it can be used as a dependency, you may also need the peerDependencies.

In the package.json file, there is an object called as peerDependencies and it consists of all the packages that are exactly required in the project or application who is downloading and the version numbers should also be the same.

1. Root package.json

Make sure your package added on root package.json dependencies section.

....
  "dependencies": {
      ...
      "MY_PACKAGE": "VERSION"
}
Enter fullscreen mode Exit fullscreen mode

2. Project package.json

The same package should add on the Angular Library project package.json peerDependencies section also.

....
  "peerDependencies": {
      ...
      "MY_PACKAGE": "VERSION"
}

Enter fullscreen mode Exit fullscreen mode

Top comments (0)