Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
danieldanielecki opened this issue Nov 2, 2020 · 7 comments

Comments

@danieldanielecki
Copy link

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
Copy link
Member

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
Copy link
Author

@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
Copy link
Member

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
Copy link
Author

@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
Copy link
Author

danieldanielecki commented Nov 6, 2020

@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
Copy link
Author

danieldanielecki commented Jan 31, 2021

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
Copy link

Will there be a fix for this in next release?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants