"@angular/material/icon" has missing dependencies @angular/cdk/coercion

[jeanbza]

"@angular/material": "^9.0.0

Repro: https://github.com/jadekler/angular-spinner/tree/e3cb4b0bfa06ce35d3dc1711219cab68105202ac

(run ng serve)

With the following app.module.ts,

import { BrowserModule } from '@angular/platform-browser';
import {MatIconModule} from '@angular/material/icon';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    MatIconModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I get,

$ ng serve

chunk {main} main.js, main.js.map (main) 2.01 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 686 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 9.72 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 340 kB [initial] [rendered]
Date: 2020-02-18T18:52:33.404Z - Hash: 2b4530d3884f9dda3f77 - Time: 2307ms

ERROR in The target entry-point "@angular/material/icon" has missing dependencies:
 - @angular/cdk/coercion

Seems like @angular/material/icon is not installing all its deendencies?

[jeanbza]

This is fixed by adding @angular/cdk to the package.json. But, I should not have to do that: if @angular/material/icon depends on @angular/cdk, it should declare that dependency and I should not have to do anything.

[Splaktar]

Please submit Angular Material and CDK questions here and issues here. This repo is for AngularJS Material.

I have transferred this issue to the correct repository for you.

[jelbourn]

@angular/cdk is a peer dependency of @angular/material (package.json)

https://nodejs.org/es/blog/npm/peer-dependencies/

[jeanbza]

Thanks for the link and the information.

AFAICT peer dependencies are not automatically installed (wow). For posterity, that's in contrast to https://nodejs.org/es/blog/npm/peer-dependencies/ - it appears as though the auto-install described in https://nodejs.org/es/blog/npm/peer-dependencies/ was reverted sometime in npm3+. Good lord, what a mess.

OK, so, AFAICT, the value that peer dependency declarations provide is occasionally telling users about invalid versions of my-lib and my-peer-lib. However, it seems to not actually address point of declaring a dependency - installing said dependency when an upstream user says install my deps.

Overall this seems a poor experience for users. When users depend on this library and their build fails (because they don't have cdk), they have zero clue what's going on. One certainly does not expect to have to go look into the package.json of various dependencies. It seems like the easiest way to get around this is to just depend on every single @angular thing, which horribly bloats a build. Is that what everyone does? It seems like all the stackblitz examples linked from the documentation site do so, so it seems to be a pattern.

I don't think any of this is going to change, but FWIW I think this is a poor experience for users and should be fixed. If material needs cdk to work, why not just add it to dependencies?

(disclosure: I'm not a javascript person and am not aware of what the downsides of adding it as a dep has - it just seems insane that it is a dependency but it's not being declared as such)

[jeanbza]

Update: after discussion, seems like it has to be this way or else users get two copies of cdk. Bummer. One nice-ish solution would be for npm to be intelligent enough to suggest missing peer dependencies when it fails.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}