Angular Universal error #997

PlexusMark · 2019-05-30T23:40:06Z

Describe the bug
I am seeing an issue with running angular-calendar using Universal/SSR. The specific issue is one step lower with the angular-draggable-droppable package where it is failing to find a definition for window, which is to be expected on Universal.

Minimal reproduction of the problem with instructions
N/A Applies to Universal only, not sure that I can do a Stackblitz with universal.

Screenshots
`/Users/User/Projects/project/website/node_modules/angular-draggable-droppable/bundles/angular-draggable-droppable.umd.js:118
for (var i = 0, limit = prefix.length; i < limit && !window.requestAnimationFrame; ++i) {
^

ReferenceError: window is not defined
at /Users/User/Projects/project/website/node_modules/angular-draggable-droppable/bundles/angular-draggable-droppable.umd.js:118:57
at /Users/User/Projects/project/website/node_modules/angular-draggable-droppable/bundles/angular-draggable-droppable.umd.js:141:3
at createCommonjsModule (/Users/User/Projects/project/website/node_modules/angular-draggable-droppable/bundles/angular-draggable-droppable.umd.js:19:36)
at /Users/User/Projects/project/website/node_modules/angular-draggable-droppable/bundles/angular-draggable-droppable.umd.js:109:35
at /Users/User/Projects/project/website/node_modules/angular-draggable-droppable/bundles/angular-draggable-droppable.umd.js:2:82
at Object. (/Users/User/Projects/project/website/node_modules/angular-draggable-droppable/bundles/angular-draggable-droppable.umd.js:5:2)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)`

Versions

@angular/core: 6.1.7
angular-calendar: 0.27.8
Browser name and version: macOS / Chrome 74.0.3729.169

The text was updated successfully, but these errors were encountered:

matts-bot · 2019-05-30T23:40:14Z

Thanks so much for opening an issue! If you'd like me to give priority to answering your issue or would just like to support this project, then please consider supporting me on Patreon

jeanft · 2019-06-03T21:50:09Z

Hi, we have the same issue.
On our side, the problem occurs from v0.26.9.
Please help! We would like to benefit from the fixes applied since.

PlexusMark · 2019-06-03T22:49:22Z

@jeanft - I downgraded to angular-draggable-droppable@4.1.0 using a shrinkwrap file. The combination of that plus the latest version of angular-calendar is working smoothly for me. It appears as though the real issue is not with angular-calendar but with @mattlewis92's other package angular-draggable-droppable.

PlexusMark · 2019-06-03T22:50:31Z

One other note, I have not tested any of the in between versions of angular-draggable-droppable. There were a couple versions in between but I didn't try them as I knew 4.1.0 was working previously.

mattlewis92 · 2019-06-03T22:54:50Z

The issue started because of this commit: mattlewis92/angular-draggable-droppable@78bdeb5 which adds the dom-autoscroller package, but unfortunately that package isn't compatible with universal.

The only solution I can think of is to use the rollup replace plugin to manually tweak the bundle to be compatible with universal. If someone could hack around in node_modules and find a minimal find and replace solution in draggable-droppable.umd.js that resolves the problem, then I can add it into the rollup config for the drag and drop package which should fix the issue.

jeanft · 2019-06-04T13:17:19Z

@jeanft - I downgraded to angular-draggable-droppable@4.1.0 using a shrinkwrap file. The combination of that plus the latest version of angular-calendar is working smoothly for me. It appears as though the real issue is not with angular-calendar but with @mattlewis92's other package angular-draggable-droppable.

Thank you very much @PlexusMark for the reply. I never used shrinkwrap. I'll look at this now and try your solution.

PlexusMark · 2019-06-04T16:05:03Z

@jeanft - I downgraded to angular-draggable-droppable@4.1.0 using a shrinkwrap file. The combination of that plus the latest version of angular-calendar is working smoothly for me. It appears as though the real issue is not with angular-calendar but with @mattlewis92's other package angular-draggable-droppable.

Thank you very much @PlexusMark for the reply. I never used shrinkwrap. I'll look at this now and try your solution.

See below for an example. You'd add this as npm-shrinkwrap.json in the same folder location as your package.json. Once you add this, make sure your package.json references the same version of angular-calendar. In this example, I've got it using 0.27.2. Lastly, either delete your node_modules folder, or remove angular-calendar and angular-draggable-droppable from the node_modules folder, then do an npm install.

{ "dependencies": { "angular-calendar": { "version": "0.27.2", "from": "angular-calendar@0.27.2", "dependencies": { "angular-draggable-droppable": { "version": "4.1.0", "from": "angular-draggable-droppable@4.1.0" } } } } }

jeanft · 2019-06-04T20:15:08Z

@jeanft - I downgraded to angular-draggable-droppable@4.1.0 using a shrinkwrap file. The combination of that plus the latest version of angular-calendar is working smoothly for me. It appears as though the real issue is not with angular-calendar but with @mattlewis92's other package angular-draggable-droppable.

Thank you very much @PlexusMark for the reply. I never used shrinkwrap. I'll look at this now and try your solution.

See below for an example. You'd add this as npm-shrinkwrap.json in the same folder location as your package.json. Once you add this, make sure your package.json references the same version of angular-calendar. In this example, I've got it using 0.27.2. Lastly, either delete your node_modules folder, or remove angular-calendar and angular-draggable-droppable from the node_modules folder, then do an npm install.

{ "dependencies": { "angular-calendar": { "version": "0.27.2", "from": "angular-calendar@0.27.2", "dependencies": { "angular-draggable-droppable": { "version": "4.1.0", "from": "angular-draggable-droppable@4.1.0" } } } } }

It works perfectly. Thank you @PlexusMark. Really appreciated.

PlexusMark · 2019-06-05T17:46:14Z

The issue started because of this commit: mattlewis92/angular-draggable-droppable@78bdeb5 which adds the dom-autoscroller package, but unfortunately that package isn't compatible with universal.

The only solution I can think of is to use the rollup replace plugin to manually tweak the bundle to be compatible with universal. If someone could hack around in node_modules and find a minimal find and replace solution in draggable-droppable.umd.js that resolves the problem, then I can add it into the rollup config for the drag and drop package which should fix the issue.

@mattlewis92 - Can be solved by using the rollup-plugin-insert and using
insert.prepend('var window = typeof window !== "object" ? window = {} : window;')

I did a local POC and it appears to be working correctly now with version angular-calendar@0.27.8 and angular-draggable-droppable@4.3.0.

PlexusMark · 2019-06-05T18:23:58Z

PR created:
mattlewis92/angular-draggable-droppable#92

Fixes #997

mattlewis92 · 2019-06-05T19:10:01Z

I just cut 0.27.9 which updates the drag and drop lib with the patch from @PlexusMark. Please do let me know if that works ok for you. Thanks again for your help with resolving this! 👍

PlexusMark · 2019-06-05T19:15:29Z

I just cut 0.27.9 which updates the drag and drop lib with the patch from @PlexusMark. Please do let me know if that works ok for you. Thanks again for your help with resolving this! 👍

I version bumped locally and its working smoothly for me. I am running universal and AOT locally.

jovicazaric · 2019-06-13T18:50:36Z

Hi @PlexusMark and @mattlewis92, I am getting the error with v0.27.9 and SSR. Do you have some hint how to solve it? Also the same error occurs for me with the latest version 0.27.11.
Thank you in advance.

mattlewis92 · 2019-06-13T21:24:49Z

@jovicazaric Can you make a repo on github with a minimal reproduction? Thanks!

jovicazaric · 2019-06-15T16:29:21Z

Hi @mattlewis92, here is a test repo with enabled SSR and installed angular-calendar package:
https://github.com/jovicazaric/angular-calendar-test
I just added CalendarModule import and also imported BrowserAnimationsModule as it is present in the GitHub readme.md but it is not mentioned anywhere in the text. I am not sure if this is required, I tried also without this import but the same error occurred.

Dev environment:
Angular CLI: 7.3.9
Node: 10.15.3
OS: win32 x64
Angular: 7.2.15

This is an error:
D:\Work\Angular\test\angular-calendar-test\dist\server.js:140555
for (var i = 0, limit = prefix.length; i < limit && !window.requestAnimationFrame; ++i) {

ReferenceError: window is not defined
at D:\Work\Angular\calendar-test\dist\server.js:140555:56
at Object.defineProperty.value (D:\Work\Angular\calendar-test\dist\server.js:140578:2)
at webpack_require (D:\Work\Angular\calendar-test\dist\server.js:20:30)
at Object.defineProperty.value (D:\Work\Angular\calendar-test\dist\server.js:140109:30)
at webpack_require (D:\Work\Angular\calendar-test\dist\server.js:20:30)
at Module. (D:\Work\Angular\calendar-test\dist\server.js:139129:74)
at webpack_require (D:\Work\Angular\calendar-test\dist\server.js:20:30)
at Module. (D:\Work\Angular\calendar-test\dist\server.js:133906:85)
at webpack_require (D:\Work\Angular\calendar-test\dist\server.js:20:30)
at Object.angular-calendar (D:\Work\Angular\calendar-test\dist\server.js:133813:18)

It looks like the error comes from DragAndDropModule. If it is required for calendar, are there some other settings needed for running SSR.

Thank you.

mattlewis92 · 2019-06-16T14:11:34Z

Ah, it's because of the post processing of the bundle done by webpack.server.config.js, it resolves module entry points instead of umd ones (the angular CLI resolves UMD by default) and the patch in the drag and drop library is only included in the UMD bundle. If you add mainFields: ['main', 'module'] to the resolve property of webpack.server.config.js then it should fix your issue as it'll process the UMD bundle first instead of the ESM one:

diff --git a/webpack.server.config.js b/webpack.server.config.js
index 6c98a99..3e4208c 100644
--- a/webpack.server.config.js
+++ b/webpack.server.config.js
@@ -10,7 +10,7 @@ module.exports = {
     server: './server.ts'
   },
   target: 'node',
-  resolve: { extensions: ['.ts', '.js'] },
+  resolve: { extensions: ['.ts', '.js'], mainFields: ['main', 'module'] },
   optimization: {
     minimize: false
   },

jovicazaric · 2019-06-17T21:04:18Z

Hi @mattlewis92, thank you a lot. The fix works. I am able to render calendar with SSR.

camolift29 · 2019-07-19T01:13:47Z

@mattlewis92 Thanks! The last solution worked for me! I have 0.27.13 version :)

anantksingh · 2019-09-16T14:24:54Z

Hi @mattlewis92
I am implementing @ng-toolkit/universal

After adding { extensions: ['.ts', '.js'], mainFields: ['main', 'module'] },
i am getting another error
npm run server

altabooking@0.0.0 server /var/www/html/angular8new
node local.js

/var/www/html/angular8new/dist/server.js:350283
})(window, function() {
^

ReferenceError: window is not defined
at Object. (/var/www/html/angularp/dist/server.js:350283:4)
at webpack_require (/var/www/html/angularp/dist/server.js:21:30)
at /var/www/html/angularp/dist/server.js:346984:78
at Object. (/var/www/html/angular8new/dist/server.js:346986:2)
at webpack_require (/var/www/html/angularp/dist/server.js:21:30)
at Object.angular-calendar (/var/www/html/angularp/dist/server.js:323550:18)
at webpack_require (/var/www/html/angularp/dist/server.js:201471:30)
at Object../node_modules/angular-calendar/angular-calendar.ngfactory.js (/var/www/html/angular8new/dist/server.js:227276:10)
at webpack_require (/var/www/html/angularp/dist/server.js:201471:30)
at Object../src/app/layout/layout-routing.module.ngfactory.js (/var/www/html/angularp/dist/server.js:272648:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! altabooking@0.0.0 server: node local.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular@0.0.0 server script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

kimhonoridez · 2019-09-23T10:23:11Z

I still have the same issue even after putting { extensions: ['.ts', '.js'], mainFields: ['main', 'module'] }

"@angular/core": "^7.1.1"
"angular-calendar": "^0.27.18"

This is the part of the code that throws the error:

(function webpackUniversalModuleDefinition(root, factory) { if(true) module.exports = factory(); else {} })(window, function() {

Below is the error that I get:

ReferenceError: window is not defined

anantksingh · 2019-09-23T10:26:14Z

@kimhonoridez,
You can use below code in server.ts file
const domino = require("domino");
const fs = require("fs");
const path = require("path");
const templateA = fs
.readFileSync(path.join("dist/browser", "index.html"))
.toString();
const win = domino.createWindow(templateA);
win.Object = Object;
win.Math = Math;

global['window'] = win;
global["document"] = win.document;

juangcarmona · 2019-11-07T15:04:53Z

Hi,

I changed the post processing of the bundle done by webpack.server.config.js by adding mainFields: ['main', 'module'] to the resolve property of webpack.server.config.js as proposed by @mattlewis92 but that raised another issue, same as the one that @anantksingh and @kimhonoridez got:

(function webpackUniversalModuleDefinition(root, factory) { if(true) module.exports = factory(); else {} })(window, function() {

Below is the error that I get:

ReferenceError: window is not defined

I am using:

"@angular/core": "8.2.13"
"angular-calendar": "0.27.20",

And... after many many attempts and workarounds**, I could make it work just by using the code proposed by @anantksingh** in my server.ts (just after the imports section)

Thanks a lot but I wonder if we are potentially hiding issues with SSR by using this "window-object-mocking" technique, what do you think?

anishchenko-anton · 2020-03-25T12:28:59Z

Hi @mattlewis92!
I have same issue when i try update angular to 9
in 8 version we uses webpack to build server.js - its work
in 9 version we use only CLI and i dont khow how apply your sollusion

"@angular/core": "^9.0.6",
"angular-calendar": "^0.28.5",
"angular-draggable-droppable": "^4.3.10",

`diff --git a/webpack.server.config.js b/webpack.server.config.js
index 6c98a99..3e4208c 100644
--- a/webpack.server.config.js
+++ b/webpack.server.config.js
@@ -10,7 +10,7 @@ module.exports = {
server: './server.ts'
},
target: 'node',

resolve: { extensions: ['.ts', '.js'] },

resolve: { extensions: ['.ts', '.js'], mainFields: ['main', 'module'] },
optimization: {
minimize: false
},
`

mattlewis92 · 2020-03-25T19:54:27Z

@anishchcenko you need to add these 2 lines to the top of the server.ts file for it to work: https://github.com/mattlewis92/angular-calendar#is-this-library-aot-and-universal-compatible

piotrbrzuska · 2020-04-02T10:07:15Z

@anishchcenko you need to add these 2 lines to the top of the server.ts file for it to work: https://github.com/mattlewis92/angular-calendar#is-this-library-aot-and-universal-compatible

It works!

Closes mattlewis92/angular-calendar#997

PlexusMark mentioned this issue Jun 5, 2019

fix: restore compatibility with angular universal mattlewis92/angular-draggable-droppable#92

Merged

mattlewis92 closed this as completed in mattlewis92/angular-draggable-droppable@7fbaa2a Jun 5, 2019

mattlewis92 added a commit that referenced this issue Jun 5, 2019

fix: restore compatibility with universal

52ff58e

Fixes #997

smokinguns mentioned this issue Feb 26, 2020

Angular Calendar - Positioning SSR Issue #1177

Closed

AlexGuz23 pushed a commit to AlexGuz23/angular-draggable-droppable that referenced this issue Nov 3, 2022

fix: restore compatibility with angular universal

9ec0812

Closes mattlewis92/angular-calendar#997

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angular Universal error #997

Angular Universal error #997

PlexusMark commented May 30, 2019 •

edited

Loading

matts-bot bot commented May 30, 2019

jeanft commented Jun 3, 2019

PlexusMark commented Jun 3, 2019

PlexusMark commented Jun 3, 2019

mattlewis92 commented Jun 3, 2019

jeanft commented Jun 4, 2019 •

edited

Loading

PlexusMark commented Jun 4, 2019

jeanft commented Jun 4, 2019

PlexusMark commented Jun 5, 2019

PlexusMark commented Jun 5, 2019

mattlewis92 commented Jun 5, 2019

PlexusMark commented Jun 5, 2019 •

edited

Loading

jovicazaric commented Jun 13, 2019 •

edited

Loading

mattlewis92 commented Jun 13, 2019

jovicazaric commented Jun 15, 2019 •

edited

Loading

mattlewis92 commented Jun 16, 2019

jovicazaric commented Jun 17, 2019

camolift29 commented Jul 19, 2019

anantksingh commented Sep 16, 2019 •

edited

Loading

kimhonoridez commented Sep 23, 2019

anantksingh commented Sep 23, 2019

juangcarmona commented Nov 7, 2019 •

edited

Loading

anishchenko-anton commented Mar 25, 2020

mattlewis92 commented Mar 25, 2020

piotrbrzuska commented Apr 2, 2020

Angular Universal error #997

Angular Universal error #997

Comments

PlexusMark commented May 30, 2019 • edited Loading

matts-bot bot commented May 30, 2019

jeanft commented Jun 3, 2019

PlexusMark commented Jun 3, 2019

PlexusMark commented Jun 3, 2019

mattlewis92 commented Jun 3, 2019

jeanft commented Jun 4, 2019 • edited Loading

PlexusMark commented Jun 4, 2019

jeanft commented Jun 4, 2019

PlexusMark commented Jun 5, 2019

PlexusMark commented Jun 5, 2019

mattlewis92 commented Jun 5, 2019

PlexusMark commented Jun 5, 2019 • edited Loading

jovicazaric commented Jun 13, 2019 • edited Loading

mattlewis92 commented Jun 13, 2019

jovicazaric commented Jun 15, 2019 • edited Loading

mattlewis92 commented Jun 16, 2019

jovicazaric commented Jun 17, 2019

camolift29 commented Jul 19, 2019

anantksingh commented Sep 16, 2019 • edited Loading

kimhonoridez commented Sep 23, 2019

anantksingh commented Sep 23, 2019

juangcarmona commented Nov 7, 2019 • edited Loading

anishchenko-anton commented Mar 25, 2020

mattlewis92 commented Mar 25, 2020

piotrbrzuska commented Apr 2, 2020

PlexusMark commented May 30, 2019 •

edited

Loading

jeanft commented Jun 4, 2019 •

edited

Loading

PlexusMark commented Jun 5, 2019 •

edited

Loading

jovicazaric commented Jun 13, 2019 •

edited

Loading

jovicazaric commented Jun 15, 2019 •

edited

Loading

anantksingh commented Sep 16, 2019 •

edited

Loading

juangcarmona commented Nov 7, 2019 •

edited

Loading