I dont get V5 to work with Angular 13

[zedL]

Hey,

I dont get V5 to work with Angular 13. Are there any example out there?

Thanks

[dimsemenov]

I don't work with Angular, but if you know what's wrong with package.json - feel free to send a PR.

[zedL]

I used the 5Beta and it worked. Now I wanted to switch to the release version and run into this error. Unfortunately, I can no longer go back to the beta, which no longer works either.

Unfortunately I don't have a solution for this. I opend a question on stackoverflow.

It´s possible to use named exports and import like this? import {PhotoSwipe, PhotoSwipeLightbox} from 'photoswipe';

[zedL]

I got it to work with Angular 13.

Here is what I did:

Add a file for custom typings. src/types/index.d.ts

Add following code to index.d.ts:

declare module 'photoswipe';
declare module 'photoswipe/lightbox';

Add import in my angular components style file (showcase.components.scss) @import "photoswipe/dist/photoswipe.css";

Add imports and code in my angular component ts file (showcase.component.ts)

import PhotoSwipeLightbox from 'photoswipe/lightbox';
import PhotoSwipe from 'photoswipe';

ngAfterViewInit(): void {
  this.initPhotoSwipe();
}

private initPhotoSwipe() {
    this.ngZone.runOutsideAngular(() => {
      const lightbox = new PhotoSwipeLightbox({
        gallery: '#appShowcaseCarousel',
        children: 'a',
        pswpModule: PhotoSwipe,
      });
      lightbox.init();
    });
  }

I applied own styling too.

See it in action here => https://traact.app/intro => app showcase pictures

[dimsemenov]

Thanks for sharing, I'll see what I can do to make it easier.

It´s possible to use named exports and import like this? import {PhotoSwipe, PhotoSwipeLightbox} from 'photoswipe';

Technically yes, but I'm trying to make sure that import PhotoSwipe from 'photoswipe'; does not include Lightbox.

[ericrtung]

I would love to see this too as I cannot do the following using Vite + Vue 3:

pswpModule: () => import('photoswipe'),

[inttyl]

Hi @zedL, @dimsemenov I followed your instructions but now I got the following error on Chrome Console

scripts.js:1399 Uncaught SyntaxError: Unexpected token 'export' (at scripts.js:1399:1)

And when I click on scripts.js, it point to the package PhotoSwipeLightbox which is on photoswipe in node_module directory

Anyone known had a solution for that error ?

[inttyl]

Hi @zedL ,

Also how did you include the photoswipe.css in your angular project ?

Thanks

[zedL]

@inttyl in my x.component.scss file I added @import "photoswipe/dist/photoswipe.css";

[zedL]

@inttyl in angular.json => "styles": [ "node_modules/photoswipe/dist/photoswipe.css", "src/styles.scss" ]

[zedL]

Here is a full working example :) ng-photoswipe.zip npm install & npm start

[dealancer]

Any success? I having same problem when using Lit.

[dealancer]

Actually adding

declare module 'photoswipe';
declare module 'photoswipe/lightbox';

into ptotoswipe.d.ts file in the component root fixed the problem. Looks like it is using JS exports but not TS in this case.

Would be nice to have official Angular or Lit or any other TS based framework to be included into docs.

[kohkoksiang]

find error as listed below:

" ERROR in node_modules/photoswipe/dist/types/types.d.ts:4:70 - error TS1110: Type expected.

4 export declare type AddPostfix<T extends string, P extends string> = ${T}${P};

"

I am using "photoswipe": "^5.2.5"(also have tried the latest version 5.2.8 still the same)

If I downgrade the version to 5.2.4, it will come with same error as:

Cannot find module 'photoswipe/lightbox'

[keatkeat87]

tsconfig.json

{ "compilerOptions": { "paths": { "photoswipe/lightbox": ["./node_modules/photoswipe/dist/types/photoswipe.d.ts"] }, } }

work for me.

[ghost]

tsconfig.json

{ "compilerOptions": { "paths": { "photoswipe/lightbox": ["./node_modules/photoswipe/dist/types/photoswipe.d.ts"] }, } }

Worked on React (TSX) as well thanks

[rbjs]

Here is a full working example :) ng-photoswipe.zip npm install & npm start

@zedL zedL, have you chance to try photoswipe with latest Angular (v14.2) ?

Your zipped Angular v13.3.0 project works like a charm. Thanks a lot!

But when I tried to implement into my Angular v14.2.1 project, I got errors like:

Error: node_modules/photoswipe/dist/types/gestures/gestures.d.ts:92:16 - error TS2503: Cannot find namespace 'NodeJS'.

Error: node_modules/photoswipe/dist/types/util/util.d.ts:12:123 - error TS2344: Type 'undefined' does not satisfy the constraint 'Node'.

[rbjs]

Got dirty work around for these issues:

Enable skipLibCheck in tsconfig.app.json

{ //... compilerOptions: { "skipLibCheck": true, //... } }

This prevents Typescript from type-checking the entire imported libraries, so it degrades type checking, and ideally we shouldn't use this.

[Rubon72]

same problem on react. Half of year past. Is anybody going to fix it?

[Rubon72]

ERROR in /node_modules/photoswipe/dist/types/types.d.ts 4:69-72 [tsl] ERROR in /node_modules/photoswipe/dist/types/types.d.ts(4,70) TS1110: Type expected.

[ghost]

same problem on react. Half of year past. Is anybody going to fix it?

Just read my reply 3 post above yours. Thats the fix

[jeroenkroese]

Here is a full working example :) ng-photoswipe.zip npm install & npm start

@zedL zedL, have you chance to try photoswipe with latest Angular (v14.2) ?

Your zipped Angular v13.3.0 project works like a charm. Thanks a lot!

But when I tried to implement into my Angular v14.2.1 project, I got errors like:

Error: node_modules/photoswipe/dist/types/gestures/gestures.d.ts:92:16 - error TS2503: Cannot find namespace 'NodeJS'.

Error: node_modules/photoswipe/dist/types/util/util.d.ts:12:123 - error TS2344: Type 'undefined' does not satisfy the constraint 'Node'.

You could try adding "node" to the types in the tsconfig file

  "compilerOptions": {
    "types": ["node"]
  },

[philiplindberg]

To initialize lightbox as PhotoSwipeLightbox (which includes additional methods like loadAndOpen) instead of PhotoSwipe, I had to specify the path in tsconfig.json as follows:

{
  "compilerOptions": {
    "paths": {
      "photoswipe/lightbox": ["../../node_modules/photoswipe/dist/types/lightbox/lightbox.d.ts"]
    }
  }
}

lightbox initialized as PhotoSwipeLightbox:

const PhotoSwipeLightbox = (await import('photoswipe/lightbox')).default
const lightbox = new PhotoSwipeLightbox({
  ...
})
lightbox.init()
lightbox.loadAndOpen(initialIndex)

[Dylan0405]

Got dirty work around for these issues:

Enable skipLibCheck in tsconfig.app.json

{ //... compilerOptions: { "skipLibCheck": true, //... } }

This prevents Typescript from type-checking the entire imported libraries, so it degrades type checking, and ideally we shouldn't use this.

I met the same problem. Have you found any other better way to solve it ? @rbjs

I tried your method as @jeroenkroese suggested, but it didnt work in my case.

much appreciations If anybody could do me a favor.

[jeroenkroese]

If anyone is interested, here's a working Stackblitz with Angular 15.0.4 and Photoswipe 5.3.4

https://stackblitz.com/edit/angular-kxtxv7

[au5ton]

A potential solution to this issue is discussed here: https://github.com/dimsemenov/PhotoSwipe/issues/1983#issuecomment-1455228791

[aldairguarupe]

I got it to work with Angular 15.

Here is what I did:

Add a file for custom typings. src/types/index.d.ts

Add following code to index.d.ts:

declare module 'photoswipe';
declare module 'photoswipe/lightbox';

Add import in my angular components style file (showcase.components.scss) @import "photoswipe/dist/photoswipe.css";

Add imports and code in my angular component ts file (showcase.component.ts)

import PhotoSwipeLightbox from 'photoswipe/lightbox';
import PhotoSwipeLightboxType from 'photoswipe/dist/types/lightbox/lightbox'
import PhotoSwipe from 'photoswipe';

photoSwipeLightbox: typeof PhotoSwipeLightboxType

constructor(){
   this.photoSwipeLightbox = PhotoSwipeLightbox
}

ngAfterViewInit(): void {
  this.initPhotoSwipe();
}

private initPhotoSwipe() {
      const lightbox = new this.photoSwipeLightbox({
        gallery: '#appShowcaseCarousel',
        children: 'a',
        pswpModule: PhotoSwipe,
      });
      lightbox.init();
    });

[marcelo-albuquerque]

tsconfig.json

{ "compilerOptions": { "paths": { "photoswipe/lightbox": ["./node_modules/photoswipe/dist/types/photoswipe.d.ts"] }, } }

work for me.

Worked on React (TSX) and NEXT.js as well thanks!

[marcelo-albuquerque]

Actually adding

declare module 'photoswipe';
declare module 'photoswipe/lightbox';

into ptotoswipe.d.ts file in the component root fixed the problem. Looks like it is using JS exports but not TS in this case.

Would be nice to have official Angular or Lit or any other TS based framework to be included into docs.

Worked on React (TSX) and NEXT.js as well thanks!

[dave-vdg]

I am trying to upgrade from v4 to v5 with angular 15, I added the index.d.ts and imported both modules as mentioned above.

For some reason when I start my app it will display

Cannot find module 'photoswipe/lightbox' or its corresponding type declarations.

as you can see in the sceenshot.

Does someone have an idea what I can do or did someone manage to make v5 work with Angular >13

[PhilFlash]

Demo with Photoswipe 5.5.4 and Angular 18 here: https://stackblitz.com/edit/stackblitz-starters-kadknz?file=src%2Fapp%2Fapp.component.html

For this demo, Chrome is required. With Firefox or Edge, use button "Open Preview in new Tab" (in top right) because there are problems with CORS and CDN images with stackblitz (and there are no images in preview window)