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.<anonymous> (/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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 25 (5 by maintainers)

Commits related to this issue

fix: restore compatibility with universal Fixes #997 — committed to mattlewis92/angular-calendar by mattlewis92 5 years ago
fix: restore compatibility with angular universal Closes https://github.com/mattlewis92/angular-calendar/issues/997 — committed to AlexGuz23/angular-draggable-droppable by jackwolfskin0302 5 years ago

Most upvoted comments

@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!

piotrbrzuska on Apr 2, 2020

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

jovicazaric on Jun 17, 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
   },

mattlewis92 on Jun 16, 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! 👍

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

PlexusMark on Jun 5, 2019