Angular 9 - The target entry-point has missing dependencies

Question

I have upgraded an Angular library to Angular 9. However when I attempt to use that library in another Angular 9 project I get an error like this:

The target entry-point "mycomponents/entity-selector" has missing dependencies:

 - mycomponents/shared-services  - mycomponents/spinner  - mycomponents/text-input 

Package.json

{   "$schema": "../../../node_modules/ng-packagr/package.schema.json",   "name": "entity-selector",   "version": "0.0.0",   "ngPackage": {     "lib": {       "entryFile": "public_api.ts"     },     "dest": "../../../dist/mycomponents/entity-selector"   } } 

This is a secondary endpoint which uses other components which are also secondary endpoints.

In the library project do I need to some define the dependencies in ng-packgr or somewhere else? The module for the entity-selector component imports the appropriate module for the other components. This issue cropped up since Angular 9.

Thank in advance.

Answer 1

ERROR in The target entry-point "primeng" has missing dependencies: - chart.js  ERROR in The target entry-point "primeng" has missing dependencies: - quill  ERROR in The target entry-point "primeng" has missing dependencies: - @fullcalendar/core   npm install --save chart.js npm install --save quill npm install --save @fullcalendar/core 

Answer 2

The First Problem

You're getting that error because your test project does not have those dependencies installed in its node_modules/ directory. But I believe that doing as @Renato suggests and forcing the users of your library to manually install those dependencies is the wrong approach.

In order to have the missing dependencies automatically installed, it's necessary to add your library's 3rd party dependencies in two places (within the library itself):

• package.json at the root of the library. I believe you already have this done. Putting all packages here ensures that there is only a single node_modules/ directory at the root when you run your project for development.
• projects/entity-selector/package.json is the file that is used as the basis for the package.json file that Angular generates when you build your library. It is necessary to add the dependencies here so that the consumers of your library know which packages they (well, their package manager) need to download. I believe that this is what you're currently missing.

The Second Problem

After properly adding my dependencies to both places, I got build errors telling me that I should use "peerDependencies" and not "dependencies" for my library.

That is not applicable to my use case, so to get around it I had to explicitly whitelist my dependencies. Doing so looks a little different depending on which of the following you're using:

• projects/entity-selector/package.json
• projects/entity-selector/ng-package.json.

In projects/entity-selector/package.json it should be:

{   "$schema": "../../../node_modules/ng-packagr/package.schema.json",   "ngPackage": {     "lib": {       "entryFile": "public_api.ts"     },     "dest": "../../../dist/mycomponents/entity-selector",     "whitelistedNonPeerDependencies": [       "mycomponents/shared-services",       "mycomponents/spinner",       "mycomponents/text-input"     ]   } } 

In projects/entity-selector/ng-package.json it should be:

{   "$schema": "./node_modules/ng-packagr/package.schema.json",   "lib": {     "entryFile": "public_api.ts"   },   "whitelistedNonPeerDependencies": [     "mycomponents/shared-services",     "mycomponents/spinner",     "mycomponents/text-input"   ] } 

---

Finally, don't forget to build your project with ng build --prod or you'll get an error about the new Ivy compiler when you try to publish to NPM!