Compilation failed

[aosyatnik]

What is the current behavior?

I get the next compilation error: ✖ Compiling with Angular sources in Ivy partial compilation mode. ERROR: node_modules/ng-gallery/lib/components/gallery.component.d.ts:88:80 - error TS2344: Type '{ id: { alias: "id"; required: false; }; items: { alias: "items"; required: false; }; nav: { alias: "nav"; required: false; }; dots: { alias: "dots"; required: false; }; loop: { alias: "loop"; required: false; }; ... 35 more ...; skipInitConfig: { ...; }; }' does not satisfy the constraint '{ [key: string]: string; }'. Property '"id"' is incompatible with index signature. Type '{ alias: "id"; required: false; }' is not assignable to type 'string'.

88 static ɵcmp: i0.ɵɵComponentDeclaration<GalleryComponent, "gallery", never, { "id": { "alias": "id"; "required": false; }; "items": { "alias": "items"; "required": false; }; "nav": { "alias": "nav"; "required": false; }; "dots": { "alias": "dots"; "required": false; }; "loop": { "alias": "loop"; "required": false; }; "debug": { "alias": "debug"; "required": false; }; "thumb": { "alias": "thumb"; "required": false; }; "counter": { "alias": "counter"; "required": false; }; "dotsSize": { "alias": "dotsSize"; "required": false; }; "autoPlay": { "alias": "autoPlay"; "required": false; }; "thumbWidth": { "alias": "thumbWidth"; "required": false; }; "thumbHeight": { "alias": "thumbHeight"; "required": false; }; "disableThumb": { "alias": "disableThumb"; "required": false; }; "scrollBehavior": { "alias": "scrollBehavior"; "required": false; }; "navScrollBehavior": { "alias": "navScrollBehavior"; "required": false; }; "slidingDisabled": { "alias": "slidingDisabled"; "required": false; }; "thumbSlidingDisabled": { "alias": "thumbSlidingDisabled"; "required": false; }; "mouseSlidingDisabled": { "alias": "mouseSlidingDisabled"; "required": false; }; "thumbMouseSlidingDisabled": { "alias": "thumbMouseSlidingDisabled"; "required": false; }; "playerInterval": { "alias": "playerInterval"; "required": false; }; "slidingDuration": { "alias": "slidingDuration"; "required": false; }; "slidingEase": { "alias": "slidingEase"; "required": false; }; "boxTemplate": { "alias": "boxTemplate"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "thumbTemplate": { "alias": "thumbTemplate"; "required": false; }; "resizeDebounceTime": { "alias": "resizeDebounceTime"; "required": false; }; "imageSize": { "alias": "imageSize"; "required": false; }; "thumbImageSize": { "alias": "thumbImageSize"; "required": false; }; "dotsPosition": { "alias": "dotsPosition"; "required": false; }; "counterPosition": { "alias": "counterPosition"; "required": false; }; "slidingDirection": { "alias": "slidingDirection"; "required": false; }; "loadingAttr": { "alias": "loadingAttr"; "required": false; }; "loadingStrategy": { "alias": "loadingStrategy"; "required": false; }; "thumbPosition": { "alias": "thumbPosition"; "required": false; }; "thumbView": { "alias": "thumbView"; "required": false; }; "thumbDetached": { "alias": "thumbDetached"; "required": false; }; "thumbAutosize": { "alias": "thumbAutosize"; "required": false; }; "itemAutosize": { "alias": "itemAutosize"; "required": false; }; "autoHeight": { "alias": "autoHeight"; "required": false; }; "destroyRef": { "alias": "destroyRef"; "required": false; }; "skipInitConfig": { "alias": "skipInitConfig"; "required": false; }; }, { "itemClick": "itemClick"; "thumbClick": "thumbClick"; "playingChange": "playingChange"; "indexChange": "indexChange"; "itemsChange": "itemsChange"; "error": "error"; }, never, never, true, never>;

node_modules/ng-gallery/lib/components/templates/gallery-iframe.component.d.ts:15:93 - error TS2344: Type '{ src: { alias: "src"; required: false; }; pauseVideo: { alias: "pause"; required: false; }; autoplay: { alias: "autoplay"; required: false; }; loadingAttr: { alias: "loadingAttr"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"src"' is incompatible with index signature.
    Type '{ alias: "src"; required: false; }' is not assignable to type 'string'.

15     static ɵcmp: i0.ɵɵComponentDeclaration<GalleryIframeComponent, "gallery-iframe", never, { "src": { "alias": "src"; "required": false; }; "pauseVideo": { "alias": "pause"; "required": false; }; "autoplay": { "alias": "autoplay"; "required": false; }; "loadingAttr": { "alias": "loadingAttr"; "required": false; }; }, {}, never, never, true, never>;

node_modules/ng-gallery/lib/components/templates/gallery-image.component.d.ts:34:91 - error TS2344: Type '{ isThumbnail: { alias: "isThumbnail"; required: false; }; loadingAttr: { alias: "loadingAttr"; required: false; }; alt: { alias: "alt"; required: false; }; src: { alias: "src"; required: false; }; loadingIcon: { ...; }; loadingError: { ...; }; errorIcon: { ...; }; }' does not satisfy the constraint '{ [key: string]: string; }'. Property '"isThumbnail"' is incompatible with index signature. Type '{ alias: "isThumbnail"; required: false; }' is not assignable to type 'string'.

34 static ɵcmp: i0.ɵɵComponentDeclaration<GalleryImageComponent, "gallery-image", never, { "isThumbnail": { "alias": "isThumbnail"; "required": false; }; "loadingAttr": { "alias": "loadingAttr"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "src": { "alias": "src"; "required": false; }; "loadingIcon": { "alias": "loadingIcon"; "required": false; }; "loadingError": { "alias": "loadingError"; "required": false; }; "errorIcon": { "alias": "errorIcon"; "required": false; }; }, { "error": "error"; "loaded": "loaded"; }, never, never, true, never>;

node_modules/ng-gallery/lib/components/templates/gallery-video.component.d.ts:26:91 - error TS2344: Type '{ src: { alias: "src"; required: false; }; poster: { alias: "poster"; required: false; }; mute: { alias: "mute"; required: false; }; loop: { alias: "loop"; required: false; }; controls: { alias: "controls"; required: false; }; ... 4 more ...; playVideo: { ...; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"src"' is incompatible with index signature.
    Type '{ alias: "src"; required: false; }' is not assignable to type 'string'.

26     static ɵcmp: i0.ɵɵComponentDeclaration<GalleryVideoComponent, "gallery-video", never, { "src": { "alias": "src"; "required": false; }; "poster": { "alias": "poster"; "required": false; }; "mute": { "alias": "mute"; "required": false; }; "loop": { "alias": "loop"; "required": false; }; "controls": { "alias": "controls"; "required": false; }; "controlsList": { "alias": "controlsList"; "required": false; }; "disableRemotePlayback": { "alias": "disableRemotePlayback"; "required": false; }; "disablePictureInPicture": { "alias": "disablePictureInPicture"; "required": false; }; "pauseVideo": { "alias": "pause"; "required": false; }; "playVideo": { "alias": "play"; "required": false; }; }, { "error": "error"; }, never, never, true, never>;

node_modules/ng-gallery/lightbox/gallerize.directive.d.ts:39:86 - error TS2344: Type '{ gallerize: { alias: "gallerize"; required: false; }; selector: { alias: "selector"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'. Property '"gallerize"' is incompatible with index signature. Type '{ alias: "gallerize"; required: false; }' is not assignable to type 'string'.

39 static ɵdir: i0.ɵɵDirectiveDeclaration<GallerizeDirective, "[gallerize]", never, { "gallerize": { "alias": "gallerize"; "required": false; }; "selector": { "alias": "selector"; "required": false; }; }, {}, never, never, true, never>;

node_modules/ng-gallery/lightbox/lightbox.directive.d.ts:16:84 - error TS2344: Type '{ index: { alias: "lightbox"; required: false; }; id: { alias: "gallery"; required: false; }; }' does not satisfy the constraint '{ [key: string]: string; }'.
  Property '"index"' is incompatible with index signature.
    Type '{ alias: "lightbox"; required: false; }' is not assignable to type 'string'.

16     static ɵdir: i0.ɵɵDirectiveDeclaration<LightboxDirective, "[lightbox]", never, { "index": { "alias": "lightbox"; "required": false; }; "id": { "alias": "gallery"; "required": false; }; }, {}, never, never, true, never>;

Compilation failed. Watching for file changes...

What are the steps to reproduce?

I added ng-gallery npm package to my library.

Which versions are you using for the following packages?

Angular: 15 Angular CDK: ^15.2.4 Angular CLI: @angular-devkit/architect 0.1502.4 @angular-devkit/build-angular 15.2.4 @angular-devkit/core 15.2.4 @angular-devkit/schematics 15.2.4 @schematics/angular 15.2.4 ng-packagr 15.2.2 rxjs 7.8.0
Typescript: 4.8.4 Gallery: 10.0.0

Is there anything else we should know?

Maybe I forgot something to setup? Probabky the same issue as https://github.com/MurhafSousli/ngx-gallery/issues/561

[eyoeldefare]

Yeah, I am having trouble making it work with Angular 15 too

[MurhafSousli]

Can you try with v9.0.1?

[eyoeldefare]

This is not an issue from your package, it seems to be caused by @angular/core compiler. It is mismatching your compiled directives type because someone from their side likely didn't updated Angular 15 the same as Angular 16 to be able to consume the same type of data after compilation . I will see if I can open an issue with them but in the mean time, people can solve this by changing the InputMap type from

[key: string]: string; to [key: string]: string | { alias: string | null; required: boolean; }; in index.d.ts file.

This is not suitable for production but will solve your compilation error for now.

[aosyatnik]

@eyoeldefare could you please send a link to angular issue?

[eyoeldefare]

Sure, I will reference this issue so it will likely show up here.

[eyoeldefare]

Hey @aosyatnik, last version of this package that supports Angular 15 is v8.0.4. So you can use that I guess.

[aosyatnik]

@MurhafSousli I have created min producible project, where you can see compilation error: https://github.com/aosyatnik/ngx-gallery-used-in-library-angular-15

[aosyatnik]

With v8.0.4 it compiles.

[smaillns]

Follow this doc to install correctly the package https://github.com/MurhafSousli/ngx-gallery/wiki/Gallery