Angular 14 compatibility

[Myrmex]

Hi,
I have tried to use this library in a newly created Angular 14 project. Yet, after installing it via npm, I get a compiler error about type VisibilityState not being defined (see below). Is there any way to fix this issue and thus trying using the library in a v. 14 app?
Thank you!

Error: node_modules/ngx-pinch-zoom/lib/pinch-zoom.component.d.ts:54:25 - error TS2304: Cannot find name 'VisibilityState'.
54     get hostOverflow(): VisibilityState;
                           ~~~~~~~~~~~~~~~
Error: node_modules/ngx-pinch-zoom/lib/pinch-zoom.component.d.ts:80:20 - error TS2304: Cannot find name 'VisibilityState'.
80         overflow?: VisibilityState;
                      ~~~~~~~~~~~~~~~

[ssergdev]

It relates to breaking changes in Typescript 4.6: VisibilityState was renamed to a DocumentVisibilityState. microsoft/TypeScript#47908
As a workaround, you can declare a proxy type somewhere in the custom *.d.ts file:

type VisibilityState = DocumentVisibilityState;

As long as you have "include": ["src/**/*.d.ts"] in your tsconfig.app.json, it will be applied.

[Myrmex]

Thank you, unfortunately I'm using the library in an Angular library project inside my Angular workspace. So I get a compile error while building the library, even before building the main app. I tried to add this to its tsconfig.lib.json:

"include": [
  "src/**/*.d.ts"
]

and then I added typings.d.ts to its src folder with this content:

type VisibilityState = DocumentVisibilityState;

Yet, when I build it I still get TS2304 cannot find VisibilityState.

[FabianDever]

@Myrmex For me it worked, when I put in the folder of the root module (in most cases app/).

edit: I also named the file custom.d.ts

[prasantht96]

@FabianDever It worked for me too. I did exactly like you said. Thank you.

[driiftkiing]

or use this patch:

diff --git a/lib/pinch-zoom.component.d.ts b/lib/pinch-zoom.component.d.ts
index c8fa3f1e46b297d3e6ba7b007aaa83c453fd7350..91c21606d3343d483c90cefe554bcc72eac0cfe9 100644
--- a/lib/pinch-zoom.component.d.ts
+++ b/lib/pinch-zoom.component.d.ts
@@ -50,7 +50,7 @@ export declare class PinchZoomComponent implements OnDestroy {
     autoHeight: boolean;
     wheelZoomFactor: number;
     draggableImage: boolean;
-    get hostOverflow(): VisibilityState;
+    get hostOverflow(): DocumentVisibilityState;
     get hostBackgroundColor(): string;
     get isTouchScreen(): boolean;
     get isDragging(): any;
@@ -76,7 +76,7 @@ export declare class PinchZoomComponent implements OnDestroy {
     getPropertiesValue(propertyName: PropertyName): any;
     getDefaultComponentProperties(): {
         disabled?: boolean;
-        overflow?: VisibilityState;
+        overflow?: DocumentVisibilityState;
         disableZoomControl?: "auto" | "disable" | "never";
         backgroundColor?: string;
         element?: string;

[olafvanv]

I forked the project and published an Angular 14 version of this library on npm, for me this works fine. Feel free to use it, but I'm not gonna maintain the project itself. So use it on your own risk :)

https://www.npmjs.com/package/@olafvv/ngx-pinch-zoom

[CrackerakiUA]

@olafvanv update to angular 15 please :)