nestjs / ng-universal

Angular Universal module for Nest framework (node.js) 🌷
https://nestjs.com
MIT License
442 stars 68 forks source link

applyDomino not working anymore (incl. 2 MWE's: 1 working, 1 not) #451

Open danieldanielecki opened 3 years ago

danieldanielecki commented 3 years ago

I'm submitting a...


[x] Regression 
[ ] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead post your question on Stack Overflow.

Current behavior

applyDomino isn't working after webpack.server.config.js has been dropped in Angular 9.

Expected behavior

applyDomino mocks the window object like in ng-universal version 1.2.0 with the presence of webpack.server.config.js.

Minimal reproduction of the problem with instructions

ng-universal with version of 1.2.0, webpack.server.config.js and few changes in angular.json (Angular 8): https://github.com/danieldanielecki/universal-nest-working-window (steps to run the project are in README.md). applyDomino does works in that repo and has an effect during the SSR, which was described in the steps to run the project.

Forked from https://github.com/TrilonIO/universal-nest, ng-universal with version 3.X.X without webpack.server.config.js using the Angular Builders: https://github.com/danieldanielecki/universal-nest applyDomino does not work in that repo and has no an effect during the SSR

Note: I have forked the project, that's why didn't upgrade it to the latest Nest. However, on my personal project an upgrade from Angular 8 to Angular 10/newest NestJS also throws a similar error related to window causing breaking the SSR app without excluding the problematic library. It was not the case before, the DOM-related objects were mocked up.

What is the motivation / use case for changing the behavior?

Some third-party plugins access window or any other DOM-related objects directly. We need those plugins in our SSR apps. The one-line solution by using applyDomino is a breeze in comparison to the number of hacks we can find online. I was also one of those to admit that on StackOverflow. Maybe it's related to the lack of WebpackConfigFactory, which has been dropped. Maybe that's the lack of webpack.server.config.js, but maybe that's something related to Angular Builders. Another idea is the lack of a bundle anymore. Really don't know, but as you'll be able to see on the MWE's, applyDomino did work, but does not.

If there's something wrong in my setup of the forked repo please submit a pull request to https://github.com/danieldanielecki/universal-nest It took me quite some time to go through all the online resources, my pre-upgrade legacy project, check out what has changed, create the MWE's, and submit this issue. Would be really appreciated.

Might be related to #163, #429. I've also tried NestJS' Discord, but it didn't solve this issue so I've created MWE's to showcase this black on white.

Environment


(See MWE's)

For Tooling issues:
- Node version: `v12.18.3`
- Platform:  `Mac`

Others:

kamilmysliwiec commented 3 years ago

I don't think there's anything we can do about this except for removing the applyDomino function (?). As we've learned in this case, we should rather leave this responsibility to Universal team as they are more capable of anticipating what breaking changes might be introduced.

danieldanielecki commented 3 years ago

@kamilmysliwiec it means that there's nothing we can do to make applyDomino work again as of Angular 9 and above due to the introduction of CLI Builders to build & serve SSR apps? I guess that's the problematic part.

kamilmysliwiec commented 3 years ago

There may be a solution, but I'm not aware of any. We might need to ask the same question in Angular Universal repo instead.

danieldanielecki commented 3 years ago

@kamilmysliwiec might you submit an issue with a link to that one? I'm pretty sure you know more in-depth on how Angular has changed since Angular 8 and could explain more precisely what we're looking for.

danieldanielecki commented 3 years ago

@kamilmysliwiec I've found that someone has updated Angular 8 to Angular 9 and indeed the domino was implemented, even though in my using NestJS app couldn't make it work. Any thoughts?

danieldanielecki commented 3 years ago

I've fixed it by using raw domino in my main.ts, do take a look into #830 (comment).

However, it doesn't change the fact that applyDomino has stopped working.

Edit: the final code in main.ts

import { createWindow } from 'domino';
import { join } from 'path';
const indexHtml = join(
  process.cwd(),
  'dist/nbinar/browser/index2.html'
);
const win = createWindow(indexHtml);

// Polyfills
(global as any).window = win;
(global as any).document = win.document;
(global as any).navigator = win.navigator;

It must be before you import ApplicationModule from server/app.module.ts.

pinktoadette commented 3 years ago

Will there be a fix for this in next release?