updating to latest version fails to compile and error as dependency missing

[sheikalthaf]

Describe the bug after upating to latest version I'm getting this error

ERROR in The target entry-point "material-community-components/color-picker" has missing dependencies:
 - @thebespokepixel/es-tinycolor
 - tinycolor2

To Reproduce Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[aceleghin]

Same error here, old import seems not exists anymore (in the doc I still see the v7 with this import: import {MccColorPickerModule} from 'material-community-components' ) With the new import I have the same missing dependencies Already tried to delete node modules but nothing changed. I have angular 10.1.2

[motabass]

Hi. There is in fact a new peer dependency not packaged with the lib @thebespokepixel/es-tinycolor used for all the color calculations in the color-picker. This is missing in the docs and README.md and also the docs and demo are still on 7.0.0. The breaking change about secondary imports also should have been statet in the changelog. Sorry for that.

@tiaguinho can you update the demo? I already took care of the missing docs about new import method and peer dependency: https://github.com/tiaguinho/material-community-components/pull/173

[jordandh]

Same error here, old import seems not exists anymore (in the doc I still see the v7 with this import: import {MccColorPickerModule} from 'material-community-components' ) With the new import I have the same missing dependencies Already tried to delete node modules but nothing changed. I have angular 10.1.2

It looks like you import from subfolders now: import { MccColorPickerModule } from 'material-community-components/color-picker';

[motabass]

Thats correct

[eholman]

@tiaguinho There is a good need for updated demo's/documentation.

Another error:

ERROR in src/app/shared/components/input/input.component.html:20:23 - error TS2322: Type '""' is not assignable to type '"openOnFocus" | "default"'.

20       <input matInput mccColorPickerOrigin #trigger="mccColorPickerOrigin" [formControlName]="controlName"  />

which should become either <input matInput mccColorPickerOrigin="openOnFocus" #trigger="mccColorPickerOrigin" [formControlName]="controlName" /> or <input matInput mccColorPickerOrigin="default" #trigger="mccColorPickerOrigin" [formControlName]="controlName" />

I like the feature openOnFocus though 👍

[motabass]

@eholman the error appears only when having "strictTemplates" = true in your angularCompilerOptions.

I'll try to change the types to work with strict template type checks.

EDIT: i maybe found a solution already: https://angular.io/guide/template-typecheck#troubleshooting-template-errors https://angular.io/guide/template-typecheck#input-setter-coercion

[motabass]

https://github.com/tiaguinho/material-community-components/pull/178/commits/5a1a3419cc72ae9bab4bdb2208746d8907775b06 should fix all error showing up due to strictTemplates checks

[motabass]

All changes are now documented and https://github.com/tiaguinho/material-community-components/releases/tag/v9.0.1 is released so this can be closed i think

[motabass]

The demo is now up to date: https://tiaguinho.github.io/material-community-components/

[eholman]

5a1a341 should fix all error showing up due to strictTemplates checks

Good move and great job!

[aceleghin]

I still see tinycolor2 missing dependencies

[motabass]

@lippomano @sheikalthaf It seems as if an import from @types/tinycolor2 in the lib is causing this. Could you try if the error disapears if you add that to your devDependencies. I also changed the import to an type-only import import type { Instance } from 'tinycolor' in https://github.com/tiaguinho/material-community-components/pull/181. I hope it helps.

[tiaguinho]

Thanks @motabass @lippomano can you check with v9.0.2?

[motabass]

@tiaguinho 9.0.2 has _theming.scss missing!!

[tiaguinho]

@motabass I just publish a new version fixing this. Thanks

@lippomano can you check version v9.0.3?

[VladMstv]

@tiaguinho Installed v 9.0.3 and installed additionally @thebespokepixel/es-tinycolor v 2.1.1 Keeps giving me this:

ERROR in node_modules/material-community-components/color-picker/color-picker.types.d.ts:2:13 - error TS1005: '=' expected.

2 import type { Instance } from 'tinycolor2';
              ~
node_modules/material-community-components/color-picker/color-picker.types.d.ts:2:31 - error TS1005: ';' expected.

2 import type { Instance } from 'tinycolor2';

[motabass]

@VladMstv which TypeScript version are you using? Seems to have no support for Type-only imports.

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html

[VladMstv]

@VladMstv which TypeScript version are you using? Seems to have no support for Type-only imports.

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html

@motabass Yeah, seems like that, 3.7.5. I'll try to upgrade it.

[devlfm]

Hi, I'm also having this problem.. 9.0.3 didn't fix it. I need the fix for the drag outside box on color picker, if there's another release with that fix I'm ok with that.

Angular CLI: 9.1.12
Node: 12.19.0
OS: linux x64

Angular: 9.1.12
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.12
@angular-devkit/build-angular     0.901.12
@angular-devkit/build-optimizer   0.901.12
@angular-devkit/build-webpack     0.901.12
@angular-devkit/core              9.1.12
@angular-devkit/schematics        9.1.12
@angular/cdk                      9.2.4
@angular/flex-layout              9.0.0-beta.31
@angular/material                 9.2.4
@ngtools/webpack                  9.1.12
@schematics/angular               9.1.12
@schematics/update                0.901.12
rxjs                              6.6.3
typescript                        3.8.3
webpack                           4.42.0

[motabass]

Being on typescript > 3.8 and adding @types/tinycolor2 to your devDependencies should fix it for now.

[belivo]

On a clean install I get this compilation error:

ERROR in node_modules/material-community-components/color-picker/color-picker.types.d.ts:41:29 - error TS2709: Cannot use namespace 'Instance' as a type.

41 export declare type Color = Instance;

[tiaguinho]

@belivo which Angular and MCC version are you using?

[belivo]

@tiaguinho "@angular/cli": "10.1.7" "typescript": "4.0.3" I think it was version 9.0.3

[muehan]

no solution jet?

An error occurred during the build:
Error: The target entry-point "material-community-components/color-picker" has missing dependencies:
 - @thebespokepixel/es-tinycolor

    at TargetedEntryPointFinder.findEntryPoints (...\node_modules\@angular\compiler-cli\ngcc\src\entry_point_finder\targeted_entry_point_finder.js:40:23)

dependency:

Angular 12.2 material-community-components 11.0.0

dev-dependency:

@types/tinycolor2 1.4.3