ReferenceError: KeyboardEvent is not defined

[wimbarelds]

I tried using this in combination with my Angular-Cli based project, but am having a problem with errors that happen once ts-node src/server.ts gets fired up.

The error I get is:

navigation.component.ts:174
    handleArrowKeyPress($event: KeyboardEvent): boolean {
                                ^
ReferenceError: KeyboardEvent is not defined

[wimbarelds]

It seems that this error only occurs when I use a hostlistener annotation (@HostListener('document:keydown', ['$event'])) on a function.

This works:

    @HostListener('document:keydown.Escape', ['$event'])
    handleArrowKeyPress($event: any): boolean {

This also works:

    @HostListener('document:keydown.Escape', ['$event'])
    handleArrowKeyPress(event: any): boolean {
            const $event = (event as KeyboardEvent);

This doesn't work:

    @HostListener('document:keydown.Escape', ['$event'])
    handleArrowKeyPress($event: KeyboardEvent): boolean {

[wimbarelds]

Removing "emitDecoratorMetadata": true, from tsconfig.json appears to fix this issue. I don't fully understand what this does, is this setting needed?

[BlankHrt]

hello , I met the same problem.
i have removed "emitDecoratorMetadata": true.but not work.
Do you have another way to solve it?

[graundas]

I found a temporary solution to this problem. I put a text replacing plugin regexp-replace-loader to webpack config:

  module: {
    rules: [
      { test: /\.(ts|js)$/, loader: 'regexp-replace-loader', options: { match: { pattern: '\\[(Mouse|Keyboard)Event\\]', flags: 'g' }, replaceWith: '[]', } },
      { test: /\.ts$/, loader: 'ts-loader' },
    ]
  },

[ghost]

@graundas thanks this worked. however i only needed to add it to my server config, if i used it in my shared config it breaks visual studio debugging

[Aderemi]

@graundas it works but I firstly had to run npm install regexp-replace-loader and added Focus to the set of events to replace like this
{ test: /\.(ts|js)$/, loader: 'regexp-replace-loader', options: { match: { pattern: '\\[(Mouse|Keyboard|Focus)Event\\]', flags: 'g' }, replaceWith: '[]', } },

[philip-firstorder]

I fixed it by adding global['TextTrackCueList'] = null; in server.ts and prerender.ts like this:

// Fix ReferenceError: KeyboardEvent is not defined
global['KeyboardEvent'] = null;

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');