Ngx-bootstrap: ReferenceError: MouseEvent is not defined (Angular 2 Universal)

[Hongbo-Miao]

The old error is back when using latest universal-starter and ng2-bootstrap.

• Angular 2 version rc6/rc7
• ng2-bootstrap version 1.1.2
• angular2-universal version 1.0.5

/my-project/node_modules/ng2-bootstrap/components/dropdown/dropdown-toggle.directive.js:62
__metadata('design:paramtypes', [MouseEvent]),
^

ReferenceError: MouseEvent is not defined
at /my-project/node_modules/ng2-bootstrap/components/dropdown/dropdown-toggle.directive.js:62:42
at Object. (/my-project/node_modules/ng2-bootstrap/components/dropdown/dropdown-toggle.directive.js:74:2)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object. (/my-project/node_modules/ng2-bootstrap/components/dropdown.js:4:35)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object. (/my-project/node_modules/ng2-bootstrap/ng2-bootstrap.js:12:10)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)

[Hongbo-Miao]

Just add

import { DropdownModule } from 'ng2-bootstrap/ng2-bootstrap';    // <- this line

 @NgModule({
    imports: [
      DropdownModule    // <- and this line
    ]
  })

in main.node.ts, you will see the error.

[Martin-Wegner]

@valorkin you deleted the events in this PR: https://github.com/valor-software/ng2-bootstrap/pull/919/files

[valorkin]

It was more like a type hack for universal, maybe some typings could help or need to revert this hack back

[crebuh]

Any workaround in the meanwhile?

[u12206050]

Only workaround I have found was to either use regexp-replace in webpack and search for [MouseEvent] and replace to [] and doing the same for KeyboardEvent etc. Do this only for the serverConfig in webpack.
{ test: /\.(ts|js)$/, loader: 'regexp-replace', query: { match: { pattern: '\\[(Mouse|Keyboard)Event\\]', flags: 'g' }, replaceWith: '[]', }, include: ['node_modules/ng2-bootstrap'] }

[crebuh]

@u12206050

thx for the tipp, I tried to remove it manually and it works. Just struggeling with the string-replace loader. I added the following code to my webpack config

  {
    test: /\.js$/,
    loader: 'string-replace',
    query: {
      multiple: [
        { search: '[MouseEvent]', replace: '[]', flags: 'g' },
        { search: '[KeyboardEvent]', replace: '[]', flags: 'g' }
      ]
    }
  }

But it doesn't work. Can you please provide your config? is there a possiblity to just scan the node_modules folders?

[valorkin]

Seems we have finished with AoT support, so I can revert a hack for universal

[Junik]

work for me

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

[Martin-Wegner]

Is it working and we can close this issue?

[flashcrow2000]

@Junik It's been a long time, but maybe someone is still watching: where do you add the regex test? I'm using angular-cli v5

[u12206050]

@flashcrow2000 It is added into the webpack conf file. But this shouldn't be a problem anymore.

[flashcrow2000]

@u12206050 it is with another module.. google maps

[valorkin]

@flashcrow2000 hope you are right, I hate as any so much, it kills an idea of typescript usage

[stephengardner]

This is still an issue. This is a recurring issue with events.

[valorkin]

@stephengardner yep, this is why we are adding test of cypress + universal