*Event/HTML*Element is not defined error in server build

[kevinbuhmann]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

Angular CLI: 1.5.0
Node: 8.7.0
OS: win32 x64
Angular: 5.0.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.2
typescript: 2.4.2
webpack: 3.8.1

Repro steps.

1. Create new app with ng new ....
2. Follow https://github.com/angular/angular-cli/wiki/stories-universal-rendering.
3. Add @HostListener('window:click') click(event: MouseEvent) { } in the app.component.ts.
4. Run yarn run build:ssr && yarn run serve:ssr.

Repro: https://github.com/kevinphelps/angular-cli-issue-8412-repro

The log given by the failure.

ReferenceError: MouseEvent is not defined
    at C:\Users\Kevin\Desktop\server-test\dist\server.js:129629:12684
    at Object.wQAS (C:\Users\Kevin\Desktop\server-test\dist\server.js:129629:12867)
    at l (C:\Users\Kevin\Desktop\server-test\dist\server.js:129629:149)
    at Object.aR8+ (C:\Users\Kevin\Desktop\server-test\dist\server.js:129629:7591)
    at l (C:\Users\Kevin\Desktop\server-test\dist\server.js:129629:149)
    at Object.bNRb (C:\Users\Kevin\Desktop\server-test\dist\server.js:129629:7978)
    at l (C:\Users\Kevin\Desktop\server-test\dist\server.js:129629:149)
    at Object.JwoV (C:\Users\Kevin\Desktop\server-test\dist\server.js:129629:995)
    at l (C:\Users\Kevin\Desktop\server-test\dist\server.js:129629:149)
    at Object.Zq8w (C:\Users\Kevin\Desktop\server-test\dist\server.js:129629:7299)

Desired functionality.

The use of Event, MouseEvent, KeyboardEvent, HTMLElement, etc. interfaces should not break the server builds.

Mention any other details that might be useful.

[SanderElias]

@kevinphelps Can you try with CLI 1.6.0-beta.0?

[MarkPieszak]

I’ll take a look, somehow haven’t ran into this yet!
Cc: @gdi2290 @vikerman

[coryrylan]

"This is an issue with the TypeScript metadata. In Angular 4.x with the respective version of the CLI, it emitted Object as the design type. With Angular 5.x, CLI 1.5, and the same version of TypeScript, it emits the actual type breaking the server build."

https://twitter.com/KevinPhelps11/status/929755584827658240

[kevinbuhmann]

@SanderElias, this is still a bug in Angular CLI 1.6.0-beta.0.

[SanderElias]

I just looked into this. There is something strange going on. The compilation and all works as expected. however, when the resulting server.JS is started, it blows up with the mentioned error.

The strange thing is: MouseEvent is used as a type. It should not end up in the JS at all!.
Changing it to type any fixes the current bug, but not in a way we would like to see.

Not sure what is the root cause of this is.

[SanderElias]

cc @Brocco

[atmman9001]

Guys, do you have any updates? I still have the same issue on the @angular/cli@1.6.0-beta.2

[kevinbuhmann]

Any updates?

[coryrylan]

Maybe this should have a corresponding issue opened against the main repo since the broken output is JS files with TS types. Sounds like some kind of compiler step issue?

[coryrylan]

I just tried the repo steps again with the latest Angular CLI 1.6 and Angular 5.1 and this seems to be working now. Here is my repo https://github.com/coryrylan/universal-test

[kevinbuhmann]

Yes!

[kevinbuhmann]

This appears to be partially fixed in Angular CLI versions 1.5.1 and 1.6.0. I think this commit fixed it: 13b3f76.

But it only works when building the server bundle using AOT. This is still an issue for non-AOT builds, but that might not actually be an issue if AOT can be the default even for watch builds.

[kevinbuhmann]

So this is definitely still a problem in Angular 5.1.1/Angular CLI 1.6.1. The server does not build properly without AOT, but watch builds do not work with AOT unless (according to #8332) you use TypeScript 2.4.2. But we need newer TypeScript to fix #8434. So it's all one big catch-22 at the moment, lol.

[kevinbuhmann]

Workaround: https://gist.github.com/kevinphelps/fb368ea8a59721640e54f5a53b02be16

Running this script in parallel with ng-alias build --app server --no-output-hashing --watch works.