1

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.

Wayne F. Kaskie
  • 3,257
  • 5
  • 33
  • 43

1 Answers1

0

@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
Yuva Raj
  • 3,881
  • 1
  • 19
  • 30
  • I do have @angular/material in the main package.json file. I didn't select enough lines when I copied and pasted. It's there now. I also updated the question to include additional steps. – Wayne F. Kaskie May 04 '21 at 13:32
  • Delete node_modules and run npm install again. If you still face, then provide a stackblitz link with the sample code. – Yuva Raj May 04 '21 at 13:38