How can I use photoswipe 5 in Angular 13

Question

I want to use new photoswipe 5 lib with Angular 13, but not get the imports to work.

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

On their homepage they have samples for plain javascirpt, vue, react, but not with angular. Any idea what is to do to get it work?

Thanks

Reproduce the problem

1. install angular cli

npm install -g @angular/cli

2. create new angular app

ng new ng-photoswipe --style scss --routing false

3. check if app is running

cd ng-photoswipe
npm start

4. install photoswipe

npm install photoswipe --save

5. add sample code

replace html code in app.component.html with

<div class="pswp-gallery pswp-gallery--single-column" id="gallery--getting-started">
  <a
    href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-2500.jpg"
    data-pswp-width="1669"
    data-pswp-height="2500"
    target="_blank">
    <img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-200.jpg" alt="" />
  </a>
  <a
    href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/7/img-2500.jpg"
    data-pswp-width="1875"
    data-pswp-height="2500" data-cropped="true" target="_blank">
    <img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/7/img-200.jpg" alt="" />
  </a>
</div>

replace ts code in app.component.ts with

import { AfterContentInit, Component, NgZone } from '@angular/core';

import PhotoSwipeLightbox from 'photoswipe/lightbox';
import PhotoSwipe from 'photoswipe';
import 'photoswipe/style.css';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterContentInit {
  constructor(private ngZone: NgZone) {}

  ngAfterContentInit(): void {
    this.ngZone.runOutsideAngular(() => {
      const lightbox = new PhotoSwipeLightbox({
        gallery: '#gallery--getting-started',
        children: 'a',
        pswpModule: PhotoSwipe,
      });

      lightbox.init();
    });
  }
}

because we have not typeings add photoswipe.d.ts next to app.component.ts with code

declare module 'photoswipe';

6. try run again

npm start

I get the following error during build in console

Error: src/app/app.component.ts:3:32 - error TS2307: Cannot find module 'photoswipe/lightbox' or its corresponding type declarations.

3 import PhotoSwipeLightbox from 'photoswipe/lightbox';

7. more infos

exports in packages.json from PhotoSwipe => https://github.com/dimsemenov/PhotoSwipe/blob/master/package.json

"exports": {
    ".": "./dist/photoswipe.esm.js",
    "./lightbox": "./dist/photoswipe-lightbox.esm.js",
    "./dist/photoswipe.css": "./dist/photoswipe.css",
    "./photoswipe.css": "./dist/photoswipe.css",
    "./style.css": "./dist/photoswipe.css"
  },

My questions:

• Why import is not working here?
• What is the difference to other frameworks like vue, react or plain javascript imports? (see photoswipe examples)
• Has the lib author something to do?

In putting together this example, I solved my own problem. Add missing typeings and import css solved this issue.

https://github.com/dimsemenov/PhotoSwipe/issues/1881