ReferenceError: MouseEvent is not defined

Question

I am trying to use ng2-select in a project which uses angular/universal-starter (TypeScript 2.x) as backbone.

(I tried to add ng2-select in an angular-cli generated project, it works well though)

Just after adding these two lines:

import { SELECT_DIRECTIVES } from 'ng2-select/ng2-select';

@Component({
  directives: [SELECT_DIRECTIVES],
  ...

I already got the error in my terminal:

ReferenceError: MouseEvent is not defined
    at /my-project/node_modules/ng2-select/components/select/off-click.js:33:42
    at Object.<anonymous> (/my-project/node_modules/ng2-select/components/select/off-click.js:43: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.<anonymous> (/my-project/node_modules/ng2-select/components/select/select.js:20:19)
    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.<anonymous> (/my-project/node_modules/ng2-select/components/select.js:2:16)
    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)
[nodemon] app crashed - waiting for file changes before starting...

This is my tsconfig.json file:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "module": "commonjs",
    "removeComments": true,
    "sourceMap": true,
    "lib": ["es6", "dom"]
  },
  "include": [
    "node_modules/@types/**/*.d.ts",
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "!node_modules/@types/**/*.d.ts"
  ],
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Answer 1

It is because of https://github.com/valor-software/ng2-select/issues/258.

Please track this issue.

Answer 2

I suppose the error was caused because the directive didn't load properly.

1) Make sure the right Components are being imported, and verify if MouseEvent is defined

2) Verify if all the components are being exported;

3) In

@Component({
  directives: [SELECT_DIRECTIVES],
  ...

make sure SELECT_DIRECTIVES isn't an array object. If it is, i think you should try using

[ ...SELECT_DIRECTIVES ]