ng2-semantic-ui & Universal

[neoswf]

Installing SUI on a NG4 & Universal project. There's a problem with the window reference inside SUI. It breaks Universal builds.

One of universal principals Gotchas is the prohibition usage of the window object. (referance).

Error I'm receiving is when trying to build a universal build:

ReferenceError: MouseEvent is not defined
    at /Users/username/Projects/app/node_modules/ng2-semantic-ui/bundles/ng2-semantic-ui.umd.min.js:3:1190
    at at.datepicker.months (/Users/username/Projects/app/node_modules/ng2-semantic-ui/bundles/ng2-semantic-ui.umd.min.js:1:69)
    at Object.<anonymous> (/Users/username/Projects/app/node_modules/ng2-semantic-ui/bundles/ng2-semantic-ui.umd.min.js:1:369)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)

Searching over this error, I discovered several discussions over other ng projects, like ng2-select, or ngx-bootstrap 1, ngx-bootstrap 2,

What's your position regarding this matter? Is it something that can be fixed in SUI?

[edcarroll]

I'd definitely like Universal to be something supported by this library, though at the moment I have no experience with it so can't really estimate the amount of work required.

Might you be able to please set up a repo that I can clone that has this library set up in the context of universal, so I can debug from there?

[neoswf]

Sure. No problem. I'll do that and post here.
Meanwhile I'd like to share results of my investigation. Approaches other people used to resolve this issue:

1. First example is Universal documentation, where calling code based on the platform is an option (but seems to me irrelevant to us, since its not modular, and needs to be called outside of each SUI component's scope.

import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';
 
constructor(@Inject(PLATFORM_ID) private platformId: Object) { ... }
 
ngOnInit() {
   if (isPlatformBrowser(this.platformId)) {
      // Client only code.
      ...
   }
   if (isPlatformServer(this.platformId)) {
     // Server only code.
     ...
   }
}

2. After that we got this example, which seems to be the common hack i encountered in all my research.

import {global} from 'angular2/src/facade/lang';
/* tslint:disable */
const KeyboardEvent = (global as any).KeyboardEvent as KeyboardEvent;
/* tslint:enable */

3. Another implementation of this approach: tirelibrary/ngx-charts@5211283

4. BUT for some reason it seems that the previous approach breaks systemjs and aot - fix(dropdown,rating,typeahead): remove global in order to be usable … valor-software/ngx-bootstrap#1734

5. another working hack i have discovered is this one, where they overwrite the event with an empty array.

[neoswf]

Have discovered a great way to integrate SUI inside an Universal+CLI project. Please find here a repo that demonstrate how to perform that: https://github.com/pquarme/cli-universal-demo

Heres a post in SO that explains a little regarding the architecture.
https://stackoverflow.com/questions/44330537/need-browseranimationsmodule-in-angular-but-gives-error-in-universal

Good luck 👍

[ebondu]

Hi,
I am facing the same issue. I looked at solutions proposed by @neoswf but I am not able to found a workaround without modifying the lib. @neoswf, how did you integrate SUI to pquarme/cli-universal-demo? I tried to add SUI in this project but without success. To me, the approach 2) seems to be the simplest and should not be to difficult to integrate to the lib.

[neoswf]

Hi @ebondu. We have deserted universal. One big messy project, bad documented, bad managed, bad everything. Its a nightmare to work with and we abandoned it in favour of https://github.com/GoogleChrome/puppeteer. Easy to use, integrate with CLI, etc.

[ebondu]

Hi, thanks for your feedback and I agree with you ;). I will have a look to the puppeteer. @edcarroll I adapted the semantic-ui lib to be compatible with universal / aot compile, but I didn't test all components, etc. (dirty way). But if you are interrested, I can send you a PR...