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

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!

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

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
   },

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.