bug(SSR): Angular Universal Broken after 10.0.0-next.2

[naveedahmed1]

Reproduction

After upgrading my app from 10.0.0-next.1 to 10.0.0-next.2, the SSR is broken.

I am not sure which of the component is actually causing this issue.

Here's the error message which I see in log:

NodeInvocationException: Prerendering failed because of error: ReferenceError: HTMLElement is not defined at D:\MyProject\dist-server\main.js:1:1552649 at Module.FKr1 (D:\MyProject\dist-server\main.js:1:1553177) at __webpack_require__ (D:\MyProject\dist-server\main.js:1:295) at Module.dNgK (D:\MyProject\dist-server\main.js:1:2631057) at __webpack_require__ (D:\MyProject\dist-server\main.js:1:295) at Object.6GTT (D:\MyProject\dist-server\main.js:1:591420) at __webpack_require__ (D:\MyProject\dist-server\main.js:1:295) at Object.zkdS (D:\MyProject\dist-server\main.js:1:4807955) at __webpack_require__ (D:\MyProject\dist-server\main.js:1:295) at Object.8b2W (D:\MyProject\dist-server\main.js:1:665835)

Expected Behavior

What behavior were you expecting to see?
It should work without throwing any error.

Actual Behavior

Throws below error:

NodeInvocationException: Prerendering failed because of error: ReferenceError: HTMLElement is not defined at D:\MyProject\dist-server\main.js:1:1552649 at Module.FKr1 (D:\MyProject\dist-server\main.js:1:1553177) at __webpack_require__ (D:\MyProject\dist-server\main.js:1:295) at Module.dNgK (D:\MyProject\dist-server\main.js:1:2631057) at __webpack_require__ (D:\MyProject\dist-server\main.js:1:295) at Object.6GTT (D:\MyProject\dist-server\main.js:1:591420) at __webpack_require__ (D:\MyProject\dist-server\main.js:1:295) at Object.zkdS (D:\MyProject\dist-server\main.js:1:4807955) at __webpack_require__ (D:\MyProject\dist-server\main.js:1:295) at Object.8b2W (D:\MyProject\dist-server\main.js:1:665835)

Environment

Angular: 10.0.0-rc.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Ivy Workspace: <error>

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.901.7
@angular-devkit/build-angular              0.1000.0-rc.0
@angular-devkit/build-optimizer            0.901.7
@angular-devkit/build-webpack              0.901.7
@angular-devkit/core                       10.0.0-rc.0
@angular-devkit/schematics                 10.0.0-rc.0
@angular/cdk                               10.0.0-next.2
@angular/fire                              6.0.0
@angular/google-maps                       10.0.0-next.2
@angular/material                          10.0.0-next.2
@angular/platform-server                   10.0.0-next.6
@angular/pwa                               0.1000.0-rc.0
@ngtools/webpack                           9.1.7
@nguniversal/module-map-ngfactory-loader   9.0.0-next.9
@schematics/angular                        10.0.0-rc.0
@schematics/update                         0.1000.0-rc.0
rxjs                                       6.5.5
typescript                                 3.9.3
webpack                                    4.42.0

[devversion]

Hello @naveedahmed1. Thanks for the issue! This was an intentional change we landed as part of angular/angular#37221 (comment). You can find more details there and in angular/angular#30586.

We will revert the decorator change though as part of another issue that came up with #19454. That should fix these SSR failures. Though ideally, you wouldn't have been affected at all by these decorators as the CLI should have optimizations for this.

Would you still be able to help providing context on this? i.e. do you use the default server builder for doing SSR? Usually the default CLI server builder should remove these decorators and the error should not surface at all. That was part of the reason why we said that this change is okay to land (as CLI consumers should not be affected). Here is the code that removes the decorators.

[naveedahmed1]

Thanks @devversion for sharing these details, we are using ngx-build-plus in our Angular app, for server we are using @angular-devkit/build-angular:server but as you mentioned and also mentioned in the comments default builders should handle this, that why are we still seeing this issue?

I have added you to a private repo, if you could please take a look and suggest if I'm missing something?

[jelbourn]

I believe this should be fixed by the 10.0.0-rc.0 release we published today. Let us know if that's not the case

[devversion]

Yeah, this is fixed quite sure, but I wanted to figure out why it failed in the first place as CLI projects should have never been affected by this change, unless build optimizer is disabled.

[naveedahmed1]

I can confirm that the issue has been fixed in 10.0.0-rc.0

[jelbourn]

@devversion this was the decorator down-leveling issue, no?

[devversion]

@jelbourn Yeah. CLI projects should have not been affected at all in next.2, so either build optimizer code in CLI does not run as expected, or the project has special setup that doesn't run build optimizer. Either way though, downleveling decorators fixes this in SSR as build optimizer would not be needed.

I'm going to check that for the sake of completeness if anything is special in the CLI project, but there is no real action on the Angular components team side.

[devversion]

@naveedahmed1 Thanks for sharing your app. Looks like nothing special in your app. My impression was that CLI would not care about decorators being downleveled or not, but it looks like for the server target, build optimizer is disabled, so it makes sense that this error surfaced. Thanks!

https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/server/index.ts#L148

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}