Problem while trying to build/run jaralax with an angular universal app.
Jps-Yoda opened this issue · comments
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.
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.
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.