i got error when run npm run dev:ssr

[Mangdar]

D:\Workspace\Frontend\whitesidev2\dist\whitesidev2\server\main.js:171203 Object(tslib__WEBPACK_IMPORTED_MODULE_0["metadata"])("design:paramtypes", [WheelEvent]), ^

ReferenceError: WheelEvent is not defined at Module../node_modules/ngx-drag-scroll/ivy_ngcc/fesm2015/ngx-drag-scroll.js (D:\Workspace\Frontend\whitesidev2\dist\whitesidev2\server\main.js:171203:84) at webpack_require (D:\Workspace\Frontend\whitesidev2\dist\whitesidev2\server\main.js:26:30) at Module../src/app/sharing/sharing.module.ts (D:\Workspace\Frontend\whitesidev2\dist\whitesidev2\server\main.js:195456:73) at webpack_require (D:\Workspace\Frontend\whitesidev2\dist\whitesidev2\server\main.js:26:30) at Module../src/app/app.module.ts (D:\Workspace\Frontend\whitesidev2\dist\whitesidev2\server\main.js:193446:82) at webpack_require (D:\Workspace\Frontend\whitesidev2\dist\whitesidev2\server\main.js:26:30) at Module../src/app/app.server.module.ts (D:\Workspace\Frontend\whitesidev2\dist\whitesidev2\server\main.js:193565:69) at webpack_require (D:\Workspace\Frontend\whitesidev2\dist\whitesidev2\server\main.js:26:30) at Module../src/main.server.ts (D:\Workspace\Frontend\whitesidev2\dist\whitesidev2\server\main.js:200059:80) at webpack_require (D:\Workspace\Frontend\whitesidev2\dist\whitesidev2\server\main.js:26:30)

[blasco]

Same here, it started happening after upgrading to version 9. For the moment you can roll back to 8.0.0-beta.2 to make it work with angular universal. It shows a warning though, but at least it doesn't break:

[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

[blasco]

Any news on this?

[bfwg]

hi @blasco , I haven't got a chance to look into this. If you know the solution, feel free to submit a PR.

[blasco]

@bfwg Thank you for the great work. Unfortunately I have no clue what is causing the issue, for the moment I'm staying with 8.0.0-beta.2 version.

[Bidthedog]

I'm getting this issue after upgrading to Angular 10 also, mind you, I couldn't tell you if it was working previously as I've also recently migrated to using SSR / Universal, so it could have been there for v8.x too.

I've done a bit of investigation, and this occurs whenever I include a ViewChild in my component as follows:

  @ViewChild('techList', { read: DragScrollComponent, static: true })
  public techList: DragScrollComponent;

I need this to be able to access currIndex for implementing custom scrolling.

Full error below:

D:\Git\Personal\ShadowMosesWebsite\src\SMD.Web\dist\smdweb\server\main.js:148026
    Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [WheelEvent]),
                                                                                   ^

ReferenceError: WheelEvent is not defined
    at Module../node_modules/ngx-drag-scroll/__ivy_ngcc__/fesm2015/ngx-drag-scroll.js (D:\Git\Personal\ShadowMosesWebsite\src\SMD.Web\dist\smdweb\server\main.js:148026:84)
    at __webpack_require__ (D:\Git\Personal\ShadowMosesWebsite\src\SMD.Web\dist\smdweb\server\main.js:20:30)
    at Module../src/app/shared/tech-list/tech-list.component.ts (D:\Git\Personal\ShadowMosesWebsite\src\SMD.Web\dist\smdweb\server\main.js:173198:73)
    at __webpack_require__ (D:\Git\Personal\ShadowMosesWebsite\src\SMD.Web\dist\smdweb\server\main.js:20:30)
    at Module../src/app/pages/home/home.component.ts (D:\Git\Personal\ShadowMosesWebsite\src\SMD.Web\dist\smdweb\server\main.js:170431:95)
    at __webpack_require__ (D:\Git\Personal\ShadowMosesWebsite\src\SMD.Web\dist\smdweb\server\main.js:20:30)
    at Module../src/app/app-routing.module.ts (D:\Git\Personal\ShadowMosesWebsite\src\SMD.Web\dist\smdweb\server\main.js:168308:84)
    at __webpack_require__ (D:\Git\Personal\ShadowMosesWebsite\src\SMD.Web\dist\smdweb\server\main.js:20:30)
    at Module../src/app/app.module.ts (D:\Git\Personal\ShadowMosesWebsite\src\SMD.Web\dist\smdweb\server\main.js:168754:77)
    at __webpack_require__ (D:\Git\Personal\ShadowMosesWebsite\src\SMD.Web\dist\smdweb\server\main.js:20:30)

A server error has occurred.
node exited with 1 code.

[blasco]

Any updates on this? Thank you again

[bfwg]

@blasco I'll try to find time today and take a look. Can you provide a piece of code demo using https://plnkr.co/, or just steps to reproduce this?

[MarcGilbertSparte]

We've got the same issue with 9.0.0-beta.4, works with 8.0.0-beta.2.

Great package btw thank you for your work !

[blasco]

@bfwg Sorry I haven't been able to set up a demo. The steps to reproduce are simple, just deploy a Angular Universal app and try to use the component, it will fail with the latest version.

[tonnystark]

I got the same issue.

[blasco]

Any progress with this, is it solved with angular 11?

[blasco]

I think the solution could be to use this to isolate the browser dependent code:

import { ..., PLATFORM_ID, ... } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

constructor(
    @Inject(PLATFORM_ID) private platformId: Object,
){
    if (isPlatformBrowser(this.platformId)) {
       // MouseEvent code
    }
}

[bfwg]

@blasco do you have a working solution?

[blasco]

@bfwg Unfortunately not, I'm just stuck with version 8.0.0 which seems to work for Angular 11 and SSR. This is the best gallery solution for angular out there, I wish you could have more support to fix these small issues.

[blasco]

Hi, has this been solved by any chance? Is it safe to update to the latest version? Thank you in advance for your outstanding work!

[bfwg]

hi @blasco , would you mind running dev:ssr on the example app and tell me what you see?

[MilotH2]

I am facing the same issue. EDIT: I can confirm, after I deleted this I can proceed without that error.