What is the correct way to use optional peerDependencies in an Angular library?

I have an Angular library that contains a number of standalone components. Some of these components are dependent on third party libraries (angular2-draggable, @fortawesome/angular-fontawesome, etc.). My goal is that I can use this library in an application but only add dependencies for the components that are actually used in the application.

For example, the library has components of

• Foo
• Bar (depends on angular2-draggable)

In the consuming application, if I am only using component Foo, then I don't want to have a dependency on angular2-draggable. How can I do this?

It seems like the correct approach is to add angular2-draggable as an optional peer dependency, as in:

"sideEffects": false,
"peerDependencies": {
"angular2-draggable": "^16.0.0"
},
"peerDependenciesMeta": {
"angular2-draggable": {
"optional": true
}
}


The library will build and publish just fine. Everything installs as expected in the consuming application. But when starting the app, I'm getting errors like: Error: Module not found: Error: Can't resolve 'angular2-draggable' This is true even if Bar is not used at all in the consuming application. How can I ensure that only dependencies that are needed are required?

Continue reading...