Problem while trying to build/run jaralax with an angular universal app.

[Jps-Yoda]

Issue description:

Thanks for the library and time used on this library.

I am using Jaralax in an Angular application that is intended to be used with Angular Universal.

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "dev:ssr": "ng run test:serve-ssr",
    "serve:ssr": "node dist/test/server/main.js",
    "build:ssr": "ng build && ng run test:server",
    "prerender": "ng run test:prerender"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.5",
    "@angular/common": "~12.0.5",
    "@angular/compiler": "~12.0.5",
    "@angular/core": "~12.0.5",
    "@angular/forms": "~12.0.5",
    "@angular/localize": "~12.0.5",
    "@angular/platform-browser": "~12.0.5",
    "@angular/platform-browser-dynamic": "~12.0.5",
    "@angular/platform-server": "~12.0.5",
    "@angular/router": "~12.0.5",
    "@fortawesome/angular-fontawesome": "^0.9.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-regular-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@ng-bootstrap/ng-bootstrap": "^9.1.3",
    "@nguniversal/express-engine": "^12.0.2",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "bootstrap": "^4.5.0",
    "express": "^4.15.2",
    "jarallax": "^1.12.7",
    "rxjs": "~6.6.0",
    "sweetalert2": "^11.1.4",
    "swiper": "^6.8.1",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
  },
  "engines": {
    "node": "14.17.1"
  }

All is working fine while I run the code with ng serve. The problem is when I build/run the code for angular universal (build:ssr / serve:ssr )

I got this error:

.../server/main.js:184006
    navigator,
    ^

TypeError: Cannot destructure property 'navigator' of 'global__WEBPACK_IMPORTED_MODULE_1__.window' as it is undefined.
    at Module.94327 ..../server/main.js:184006:5)
    at __webpack_require__ (.../server/main.js:233109:42)

Analyzing the main.js file that was generated I found that the issue is on this point:

/***/ 94327:
/*!***************************************************!*\
  !*** ./node_modules/jarallax/src/jarallax.esm.js ***!
  \***************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var lite_ready__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lite-ready */ 4466);
/* harmony import */ var lite_ready__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(lite_ready__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var global__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! global */ 74897);
/* harmony import */ var global__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(global__WEBPACK_IMPORTED_MODULE_1__);

const {
    navigator,                   <---------------- LINE 184006
} = global__WEBPACK_IMPORTED_MODULE_1__.window;

Version used:

"jarallax": "^1.12.7",

Code to reproduce the issue (HTML blocks + JavaScript initialization)

<div class="jarallax"
  style="background-image: url({{configuration.image}}); background-attachment: fixed; height: 500px;">

  <div class="container paralax-container">
    <div class="row text-center align-items-center justify-content-center">
      <div class="col-md-6">
        <a class="icon-play" data-fancybox href="{{configuration.videoUrl}}" data-toggle="modal" target="_blank">
          <fa-icon [icon]="faPlay"></fa-icon>
        </a>
      </div>
    </div>
  </div>

</div>

import { Component, OnInit, AfterViewInit, Input } from '@angular/core';
import { faPlay } from '@fortawesome/free-solid-svg-icons';
import { IVideoConfiguration } from '../domain/video-configuration.model';

import 'jarallax';

declare var jarallax: any;

@Component({
  selector: 'shared-video',
  templateUrl: './video.component.html'
})
export class VideoComponent implements OnInit, AfterViewInit {

  faPlay = faPlay;

  @Input() configuration!: IVideoConfiguration;

  constructor() { }

  ngOnInit(): void {
  }

  ngAfterViewInit() {
    jarallax(document.querySelectorAll('.jarallax'), {
      speed: 0.7
    });
  }

}

Hope this is usefull to someone.

[Jps-Yoda]

I created a sample project in order to replicate the issue:

https://github.com/Jps-Yoda/angular-univeral-jarallax

I believe, that the window object is not defined while the project is been builded, since is server side rendering. I am not sure how to fix this, I will continue analyzing.

[Jps-Yoda]

I am not sure why this was automaticaaly closed, but I believe the libray could be improved by checking window object. I couldnt find a work around this issue, with this and other libraries.

[nk-o]

Hey. You can discuss server-side rendering here - https://github.com/nk-o/jarallax/issues/126, I don't have a solution for it.