Angular 9 - The target entry-point has missing dependencies

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.

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

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!

Modify your component project to change the absolute path to a relative path.

Such as:

import {xxx} from 'src/xxx/xxx.module';

to:

import {xxx} from '../../xxx/xxx.module';

I had the same issue. This came after adding a symlink, so I had to use

npm unlink *@your/package*

or just globally

npm unlink

I think I have just worked through the situation you describe. I have an NPM package called my-pkg that contains several "libraries" (created with ng g library lib[1..N], etc). It just so happens that my libN depends on lib1. When I try to use libN in an application, I get the error:

The target entry-point "my-pkg/libN" has missing dependencies:
 - lib1

Here is how I originally imported lib1 into libN:

// libN.component.ts
import { Lib1Comp } from 'lib1';

This works when I build my-pkg. The problem is that 'lib1' doesn't resolve to a top-level package inside my application's node_modules folder. There, it should be known as my-pkg/lib1. So, let's change the import in libN.component.ts:

// libN.component.ts
import { Lib1Comp } from 'my-pkg/lib1'; // note lib1 is now prefixed with my-pkg

Of course, we don't have my-pkg installed in my-pkg's node_modules, so it can't find my-pkg/lib1 and now my-pkg doesn't build.

But what if we were able to "install" my-pkg into it's own node_modules folder? Let's try copying it in there via NPM scripts:

// package.json
...
"scripts": {
    "copy:lib1": "npx copy .\\dist\\lib1\\**\\* .\\node_modules\\my-pkg\\lib1",
    "build:lib1": "ng build --prod lib1 && npm run copy:lib1",
    // repeat copy/build scripts as needed for libs[2..N]
    "build:pkg": "npm run build:lib1 && npm run build:libN"
},

Now, we run npm run build:pkg. It builds lib1 then copies it to our local node_modules folder, and now libN can happily import from the path my-pkg/lib1 in both your library and your application!