MurhafSousli / ngx-gallery

Angular Gallery, Carousel and Lightbox
https://ngx-gallery.netlify.app/
MIT License
606 stars 128 forks source link

ng-gallery lightbox not work on Angular 18 #619

Closed bogdan580 closed 1 week ago

bogdan580 commented 1 week ago

I try run Lightbox Component on Angular 18 and have a problem. My configuration:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, HeaderComponent],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {...}

Album component:

@Component({
  selector: 'app-album',
  standalone: true,
  imports: [
    FontAwesomeModule,
    LightboxModule
  ],
  templateUrl: './album.component.html',
  styleUrl: './album.component.scss',
})
export class AlbumComponent {

  galleryId = 'myLightbox';
  items: GalleryItem[];
  constructor(public gallery: Gallery, private lightbox: Lightbox) {
    this.items = [
      {
        data: {
          src: 'https://images.pexels.com/photos/5409751/pexels-photo-5409751.jpeg',
        },
        type: GalleryItemTypes.Image,
      },
      {
        data: {
          src: 'https://images.pexels.com/photos/1142950/pexels-photo-1142950.jpeg',
        },
        type: GalleryItemTypes.Image,
      },
      {
        data: {
          src: 'https://images.pexels.com/photos/3933881/pexels-photo-3933881.jpeg',
        },
        type: GalleryItemTypes.Image,
      },
      {
        data: {
          src: 'https://images.pexels.com/photos/4101555/pexels-photo-4101555.jpeg',
        },
        type: GalleryItemTypes.Image,
      },
      {
        data: {
          src: 'https://images.pexels.com/photos/443446/pexels-photo-443446.jpeg',
        },
        type: GalleryItemTypes.Image,
      },
    ];
  }

  ngOnInit() {
    const galleryRef = this.gallery.ref(this.galleryId);
    galleryRef.load(this.items);
  }

  openInFullScreen(index: number) {
    this.lightbox.open(index, this.galleryId, {
      panelClass: 'fullscreen',
    });
  }
}

And I have got this error:

album.component.html:9 ERROR RuntimeError: NG05105: Unexpected synthetic listener @lightbox.done found. Please make sure that:
  - Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.
  - There is corresponding configuration for the animation named `@lightbox.done` defined in the `animations` field of the `@Component` decorator (see https://angular.io/api/core/Component#animations).
    at checkNoSyntheticProp (platform-browser.mjs:756:11)
    at EmulatedEncapsulationDomRenderer2.listen (platform-browser.mjs:720:86)
    at listenerInternal (core.mjs:25763:34)
    at ɵɵsyntheticHostListener (core.mjs:25676:3)
    at Object.LightboxComponent_HostBindings [as hostBindings] (ng-gallery-lightbox.mjs:98:14)
    at invokeHostBindingsInCreationMode (core.mjs:12423:9)
    at invokeDirectivesHostBindings (core.mjs:12407:9)
    at createRootComponent (core.mjs:16706:3)
    at ComponentFactory.create (core.mjs:16568:21)
    at DomPortalOutlet.attachComponentPortal (portal.mjs:302:39)

@MurhafSousli Could you please help me? Maybe I have bad configuration.

MurhafSousli commented 1 week ago

You need to provide the animation module provideAnimations() in your app config

bogdan580 commented 1 week ago

Works, thank you!