Angular-calendar: Angular Universal error
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.
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.7angular-calendar: 0.27.8- Browser name and version: macOS / Chrome 74.0.3729.169
PlexusMark
All 25 comments
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
![matts-bot[bot] picture](https://avatars.githubusercontent.com/in/12675?v=4&s=40)
matts-bot[bot]
on 31 May 2019
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.
jeanft
on 3 Jun 2019
@jeanft - I downgraded to [email protected] 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
on 4 Jun 2019
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.
PlexusMark
on 4 Jun 2019
The issue started because of this commit: https://github.com/mattlewis92/angular-draggable-droppable/commit/78bdeb5939f09783f746c8b610a00a557c1ae0e8 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
on 4 Jun 2019
@jeanft - I downgraded to [email protected] 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.
jeanft
on 4 Jun 2019
@jeanft - I downgraded to [email protected] 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": "[email protected]",
"dependencies": {
"angular-draggable-droppable": {
"version": "4.1.0",
"from": "[email protected]"
}
}
}
}
}
PlexusMark
on 4 Jun 2019
@jeanft - I downgraded to [email protected] 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": "[email protected]", "dependencies": { "angular-draggable-droppable": { "version": "4.1.0", "from": "[email protected]" } } } } }
It works perfectly. Thank you @PlexusMark. Really appreciated.
jeanft
on 4 Jun 2019
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.jsthat 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 [email protected] and [email protected].
PlexusMark
on 5 Jun 2019
PlexusMark
on 5 Jun 2019
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! 馃憤
mattlewis92
on 5 Jun 2019
I just cut
0.27.9which 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.
PlexusMark
on 5 Jun 2019
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.
jovicazaric
on 13 Jun 2019
@jovicazaric Can you make a repo on github with a minimal reproduction? Thanks!
mattlewis92
on 13 Jun 2019
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\testangular-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.
at __webpack_require__ (D:\Work\Angular\calendar-test\dist\server.js:20:30)
at Module.
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.
jovicazaric
on 15 Jun 2019
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
},
Hi @mattlewis92, thank you a lot. The fix works. I am able to render calendar with SSR.
jovicazaric
on 17 Jun 2019
@mattlewis92 Thanks! The last solution worked for me! I have 0.27.13 version :)
camolift29
on 19 Jul 2019
Hi @mattlewis92
I am implementing @ng-toolkit/universal
After adding { extensions: ['.ts', '.js'], mainFields: ['main', 'module'] },
i am getting another error
npm run server
[email protected] 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.
at __webpack_require__ (/var/www/html/angularp/dist/server.js:21:30)
at /var/www/html/angularp/dist/server.js:346984:78
at Object.
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! [email protected] server: node local.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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:
anantksingh
on 16 Sep 2019
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
kimhonoridez
on 23 Sep 2019
@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;
anantksingh
on 23 Sep 2019
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?
JuanGarciaCarmona
on 7 Nov 2019
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
},
anishchcenko
on 25 Mar 2020
@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
mattlewis92
on 25 Mar 2020
@anishchcenko you need to add these 2 lines to the top of the
server.tsfile for it to work: https://github.com/mattlewis92/angular-calendar#is-this-library-aot-and-universal-compatible
It works!
piotrbrzuska
on 2 Apr 2020
Related issues
Sushma-tiwari
路
3Comments
ntsiatinis
路
4Comments
Seb69
路
3Comments
no-more
路
3Comments
zolee
路
3Comments