importing the main module causes errors while using Angular Universal

[vahidvdn]

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-start-sm4bvm?file=src/app/app.component.ts

Steps to reproduce

Just simply install the module with ng add and import it in a module (lazy loaded) and run it by server. Everything is working fine without server side rendering.

What is expected?

It's expected at least to run without error and if it's not compatible with Angular Universal, we can handle it with *ngIf="isBrowser".

What is actually happening?

I'm getting these errors:

C:\Users\vahidnajafi\repos\project\dist\server.js:186704
        Object(tslib_es6["__metadata"])("design:paramtypes", [Event]),
                                                              ^

ReferenceError: Event is not defined
    at C:\Users\vahidnajafi\repos\project\dist\server.js:186704:63
    at Module.<anonymous> (C:\Users\vahidnajafi\repos\project\dist\server.js:186708:2)
    at __webpack_require__ (C:\Users\vahidnajafi\repos\project\dist\server.js:21:30)
    at Object.ng-zorro-antd (C:\Users\vahidnajafi\repos\project\dist\server.js:166774:18)
    at __webpack_require__ (C:\Users\vahidnajafi\repos\project\dist\server.js:161065:30)
    at Object../node_modules/ng-zorro-antd/ng-zorro-antd.ngfactory.js (C:\Users\vahidnajafi\repos\project\dist\server.js:161224:31)
    at __webpack_require__ (C:\Users\vahidnajafi\repos\project\dist\server.js:161065:30)
    at Object../src/app/modules/sazframework/sazframework.module.ngfactory.js (C:\Users\vahidnajafi\repos\project\dist\server.js:165959:31)
    at __webpack_require__ (C:\Users\vahidnajafi\repos\project\dist\server.js:161065:30)
    at Object../src/main.server.ts (C:\Users\vahidnajafi\repos\project\dist\server.js:166456:39)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! project@0.0.0 server: `node local.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the project@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:
npm ERR!     C:\Users\vahidnajafi\AppData\Roaming\npm-cache\_logs\2019-04-04T17_19_42_062Z-debug.log

Environment	Info
ng-zorro-antd	7.2.0
Browser	Chrome

---

Sorry about the demo link. This is not reproducible due to the error in server side rendering.

[vahidvdn]

After a bit of searching, I just added the following codes to server.js:

const domino = require('domino');
const fs = require('fs');
const path = require('path');
const Zone = require('zone.js');
const DIST_FOLDER = path.join(process.cwd(), 'dist');
const template = fs.readFileSync(path.join(DIST_FOLDER, 'browser', 'index.html')).toString();
const win = domino.createWindow(template);
global['Event'] = null;
global['document'] = win.document;

And now at least it runs fine. But still wondering why this happens.

In addition, some of the components like nz-carousel is not supporting Angular Universal.

[wzhudev]

We do not support SSR (or universal) yet. Please track our milestone #2474.

Duplicate of #43.

[vahidvdn]

@wendzhue I see in previous issues. But for me, it even doesn't allow me to run my server. Does it occur to you? Or maybe I'm doing something wrong. Thanks.

[wzhudev]

@vahidvdn Haven't run into that problem before personally. What do you mean by server? Is it an Angular dev server provided by Angular CLI? From your previous comment, it seems that you write a server yourself. Can you make a reproduction? The link to stackblitz above is invalid.

[vahidvdn]

I use ng-toolkit and it uses Angular Universal under the hood. You mean this doesn't happen in Angular Universal? Maybe relates to ng-toolkit library?

How can I make a reproduction with stackblitz? There should be nodejs server.

[wzhudev]

@vahidvdn You can create a new repo and share the link with us, but I guess the reason is that Event is not accessible in the server rendering context. You can exclude ng-zorro-antd from your projects and try if Event is accessible.

[vahidvdn]

You can create a new repo

Ok, I'll do it. It might take a while.

I guess the reason is that Event is not accessible in the server rendering context

That's true. It's like localStorage. But I'm wondering why this happens only to me.

You can exclude ng-zorro-antd from your projects and try if Event is accessible

Where do you mean I should test? Withing my Angular project.

[vahidvdn]

Hey @wendzhue Here is the GitHub repo, demonstrating the error. Please see the readme.

[vahidvdn]

@wendzhue Any idea why this happens to me?

[mapsgeek]

now NGzorro supposed to have SSR but i get the same error, simple angular cli generated app, ng add ngzorro, then ng add @nguniversal/express-engine, run npm run build:ssr and npm run server:ssr

error
` Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__metadata"])("design:paramtypes", [Event]),
^

ReferenceError: Event is not defined`

[vthinkxie]

@mapsgeek our doc site is built with static render with SSR, if you meet any problem, plz submit a new issue with repro link.

[mapsgeek]

sorry i didn't read the edits to the server.ts file in the docs, no problem now it works just fine :)

[vahidvdn]

@mapsgeek Where do you exactly mean?

[mapsgeek]

@vahidvdn https://ng.ant.design/docs/universal/en here
it's pretty much what you have done by adding the global['event']=null
but i don't know why it didn't work when i tried your suggestion but then worked when i replaced my server.ts content with the one on the docs page here.