Error "library" has missing dependencies - @angular/material/form-field

Question

I have a shared component library project that is a few years old (just to say it's been working fine for a while). I want to replace some of the custom components with Angular Material components. However, when I add NgMat to the library project, I get an error when attempting to use it in a separate project.

ERROR in The target entry-point "my library project" has missing dependencies:
- @angular/material/form-field
- @angular/material/datepicker

The project package.json has:

...
    "peerDependencies": {
    "@angular/common": "~10.2.4",
    "@angular/core": "~10.2.4",
    "@angular/forms": "~10.2.4",
    "@angular/material": "^10.2.4",
...

And the main package.json file has:

...
  "dependencies": {
    "@angular/animations": "~10.2.4",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~10.2.4",
    "@angular/compiler": "~10.2.4",
    "@angular/core": "~10.2.4",
    "@angular/forms": "~10.2.4",
    "@angular/material": "^10.2.4",
...

I've also whitelisted @angular/material in ng-package.json as suggested here Dependency @ng-bootstrap/ng-bootstrap must be explicitly whiteliste while having @angular/material in the project's dependencies instead of the peerDependencies.

This might not fix it but shouldn't the @angular/cdk be on version 10.2.4 as well? — AliF50

Yuva Raj Yuva Raj · Accepted Answer · 2021-05-04T05:06:20

@angular/material is declared in the peerDependencies of the library package.

"peerDependencies": { --> Peer dependencies
    "@angular/common": "~10.2.4",
    "@angular/core": "~10.2.4",
    "@angular/forms": "~10.2.4",
    "@angular/material": "^10.2.4",

That means the package inside peerDependencies will not be installed automatically when you install the library.

To fix the issue,

Either you should move @angular/material to dependencies in the library package.

"dependencies": { --> dependencies
    "@angular/material": "^10.2.4",

(or) declare @angular/material in application package.json dependencies.

"dependencies": {
    "@angular/animations": "~10.2.4",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~10.2.4",
    "@angular/compiler": "~10.2.4",
    "@angular/core": "~10.2.4",
    "@angular/forms": "~10.2.4",
    "@angular/material": "^10.2.4" --> Newly added

Error "library" has missing dependencies - @angular/material/form-field

1 Answers