Lightbox error after including BrowserAnimationsModule

[spimou]

What is the expected behavior?

Work without any errors or warnings at all

What is the current behavior?

Getting

ERROR in node_modules/@ngx-gallery/lightbox/lib/lightbox.animation.d.ts(1,47): error TS1005: ',' expected.

i ｢wdm｣: Failed to compile.

when I do ng serve in my console.

What are the steps to reproduce?

I would like to use gallery with gallerize like so <gallery gallerize [items]="cameraImages"></gallery> I start by npm install everything like $ npm i -S @ngx-gallery/core @ngx-gallery/lightbox @ngx-gallery/gallerize @angular/cdk @angular/animations hammerjs.

Then I get

  npm WARN @angular/animations@6.1.10 requires a peer of @angular/core@6.1.10 but                                                       none is installed. You must install peer dependencies yourself.
npm WARN @angular/cdk@7.1.1 requires a peer of @angular/core@>=7.0.0 but none is                                                       installed. You must install peer dependencies yourself.
npm WARN @angular/cdk@7.1.1 requires a peer of @angular/common@>=7.0.0 but none                                                       is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fse                                                      vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@                                                      1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}                                                      )

+ hammerjs@2.0.8
+ @angular/animations@6.1.10
+ @angular/cdk@7.1.1
+ @ngx-gallery/core@4.0.1
+ @ngx-gallery/gallerize@4.0.1
+ @ngx-gallery/lightbox@4.0.1
updated 6 packages and audited 21882 packages in 75.734s
found 26 vulnerabilities (9 low, 9 moderate, 8 high)
  run `npm audit fix` to fix them, or `npm audit` for details

Then I do ng serve and I get this in my console 92% after chunk asset optimization SourceMapDevToolPlugin vendor.js generate SourceMap ERROR in node_modules/@ngx-gallery/lightbox/lib/lightbox.animation.d.ts(1,47): error TS1005: ',' expected.

But Angular ends up compiled successfully, the app works and the photogallery works.

Also in the Chrome console I get

GalleryImageComponent.html:9 
ERROR Error: Found the synthetic property @fadeIn. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.
    at checkNoSyntheticProp (platform-browser.js:1296)
    at DefaultDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.setProperty (platform-browser.js:1280)
    at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.setProperty (core.js:11201)
    at setElementProperty (core.js:7957)
    at checkAndUpdateElementValue (core.js:7908)
    at checkAndUpdateElementInline (core.js:7855)
    at checkAndUpdateNodeInline (core.js:10199)
    at checkAndUpdateNode (core.js:10165)
    at debugCheckAndUpdateNode (core.js:10798)
    at debugCheckRenderNodeFn (core.js:10784)

So I do

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  ...,
  imports: [
    ...,
    BrowserAnimationsModule
  ],
  ...
})

in my app.module.ts believing that this will fix the ERROR in node_modules and the ERROR Error: Found the synthetic property @fadeIn.

Then I do ng serve but I get

ERROR in node_modules/@ngx-gallery/lightbox/lib/lightbox.animation.d.ts(1,47): e                                                      rror TS1005: ',' expected.

i ｢wdm｣: Failed to compile.

What is the use-case or motivation for changing an existing behavior?

Please help me understand how to fix this, so I can use the gallery

Which versions are you using for the following packages?

Angular: 6.0.6 Angular CDK: npm @angular/cdk -v says 6.1.0 - ng version says 7.1.1 Angular CLI: 6.0.8 Typescript: 2.7.2 Gallery: 4.0.1

Is there anything else we should know?

Angular CLI: 6.0.8
Node: 8.11.1
OS: win32 x64
Angular: 6.0.6
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.8
@angular-devkit/build-angular     0.6.8
@angular-devkit/build-optimizer   0.6.8
@angular-devkit/core              0.6.8
@angular-devkit/schematics        0.6.8
@angular/animations               6.1.10
@angular/cdk                      7.1.1
@angular/cli                      6.0.8
@ngtools/webpack                  6.0.8
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.1
typescript                        2.7.2
webpack                           4.8.3

Also, feel free to ask any other detail. Thanks

[MurhafSousli]

I guess you need to upgrade to Angular 7, try ng update @angular/cli then ng update @angular/core

[spimou]

@MurhafSousli Thanks for the tip. The project is already big and I am afraid that if I upgrade, maybe something will break. Is there any other way to fix this? Thanks

[MurhafSousli]

Unfortunately, I cannot do anything about it because your issue is caused by a conflict between angular packages versions,

[spimou]

@MurhafSousli Ok. Thanks. I will upgrade my Angular.

[eliashdezr]

@MurhafSousli This started happening again since I upgrade my project to Angular v8.0.0-beta.5

Same error: ERROR in node_modules/@ngx-gallery/lightbox/lib/lightbox.animation.d.ts(1,48): error TS2307: Cannot find module '@angular/animations/src/animation_metadata'.

[MurhafSousli]

@eliashdezr I think you should wait until @angular/cdk gets version 8

[eliashdezr]

@MurhafSousli according to the Angular team, maybe deep imports should not be allowed: https://github.com/angular/angular/issues/29020

[eyalhakim]

@MurhafSousli version 8 was officially released, can we get a fix for this?

Thank you!

[Codadel]

@eyalhakim @MurhafSousli

I'm using angular v8 and ngx-gallery 4.0.1 cause images load only one time on 4.0.3.

Same error: ERROR in node_modules/@ngx-gallery/lightbox/lib/lightbox.animation.d.ts(1,48): error TS2307: Cannot find module '@angular/animations/src/animation_metadata'.

Fixed with a little change in node_modules/@ngx-gallery/lightbox/lib/lightbox.animation.d.ts

I changed file path to : export declare const lightboxAnimation: import("@angular/animations").AnimationTriggerMetadata;

It worked for me with a correct build.