keyboard.service.d.ts(27,21): error TS2304: Cannot find name 'ExtendedKeyboardEvent'

[DariusLT]

I know this issue was already here in 2017, but unfortunately it's coming back and I can't get a rid of it...

My setup:

dependencies:

• node v11.15.0
• Angular CLI: ^7.2.15
• "@ks89/angular-modal-gallery": "^7.2.5"
• "hammerjs": "^2.0.8"
• "mousetrap": "^1.6.5"

devDependencies:

• "@angular/cli": "^7.2.15"
• "@types/mousetrap": "^1.6.4"
• "@types/hammerjs": "^2.0.36"

app.module.ts

import 'hammerjs';
import 'mousetrap';
import { GalleryModule } from '@ks89/angular-modal-gallery';

...
@NgModule({
   imports: [
         GalleryModule.forRoot(),
   ]

I removed all packages and reinstalled it again:

rm -rf node_modules package-lock.json
npm i

Building the application gives me the following error:

Date: 2020-09-29T16:12:47.146Z
Hash: df9521b6301c888cb45f
Time: 18511ms
chunk {0} runtime.26209474bfa8dc87a77c.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main.01ecbc0fcff9207e8cde.js (main) 128 bytes [initial] [rendered]
chunk {2} polyfills.a723c36635c3a098c2aa.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} styles.70b5ff4a9d0ddd0692a4.css (styles) 419 kB [initial] [rendered]
chunk {scripts} scripts.453d2d5f381f4338dca9.js (scripts) 308 kB [entry] [rendered]

ERROR in node_modules/@ks89/angular-modal-gallery/lib/services/keyboard.service.d.ts(27,21): error TS2304: Cannot find name 'ExtendedKeyboardEvent'.

Looking at the file in my IDE, shows me the error of missing import statement of 'ExtendedKeyboardEvent'. (/node_modules/@ks89/angular-modal-gallery/lib/services/keyboard.service.d.ts)

/// <reference types="mousetrap" />
import { InjectionToken } from '@angular/core';
import { KeyboardServiceConfig } from '../model/keyboard-service-config.interface';
export declare const KEYBOARD_CONFIGURATION: InjectionToken<KeyboardServiceConfig>;
/**
 * Service to intercept ctrl+s (or cmd+s on macOS) using a third-party library, called Mousetrap.
 */
export declare class KeyboardService {
    private config;
    /**
     * Private Mousetrap variable to store the instance.
     */
    private mousetrap;
    /**
     * Private variable to store shortcuts as either Array or string.
     */
    private shortcuts;
    /**
     * Constructor of `KeyboardService` to init `mousetrap` and `shortcuts` private variables.
     * @param KeyboardServiceConfig config object received by the `forRoot()` function to init custom shortcuts
     */
    constructor(config: KeyboardServiceConfig);
    /**
     * Method to add a lister for ctrl+s/cmd+s keyboard events.
     * @param (e: ExtendedKeyboardEvent, combo: string) => any onBind callback function to add shortcuts
     */
    add(onBind: (e: ExtendedKeyboardEvent, combo: string) => any): void;
    /**
     * Method to reset all listeners. Please, call this function when needed
     * to free resources ad prevent leaks.
     */
    reset(): void;
}

I would highly appreciate your help and how to close this issue!

[Ks89]

Did you try to do this https://stackoverflow.com/a/42504142/3590376?

[ghost]

@Ks89 I am also facing same issue, I refer similar references and tried to solve the error - Not success ed till now

Issue: add(onBind: (e: ExtendedKeyboardEvent, combo: string) => any): void;

Already exist: 1) "lib": ["dom", "es2018"] 2) mousetrap, hammer and dev dependency

[DariusLT]

Hi Stefano,

Unfortunately, it's still the issue. I have no idea what's causing it.... It started all of the sudden without having anything changed. So my guess would be due to the dependencies call maybe?

According to this documentation, it is a difference between ^ and ~. Here is another thread.

• ~version “Approximately equivalent to version” See semver
• ^version “Compatible with version” See semver

{
    "name": "my-procject",
    "version": "2.0.0",
    "license": "MIT",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build --prod",
        "predeploy": "rimraf ./dist/**",
        "prod": "ng build --prod",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^7.2.15",
        "@angular/cdk": "^7.3.7",
        "@angular/common": "^7.2.15",
        "@angular/compiler": "^7.2.15",
        "@angular/core": "^7.2.15",
        "@angular/forms": "^7.2.15",
        "@angular/http": "^7.2.15",
        "@angular/platform-browser": "^7.2.15",
        "@angular/platform-browser-dynamic": "^7.2.15",
        "@angular/platform-server": "^7.2.15",
        "@angular/router": "^7.2.15",
        "@ks89/angular-modal-gallery": "^7.2.5",
        "@ngx-translate/core": "^11.0.1",
        "@ngx-translate/http-loader": "^4.0.0",
        "@stomp/ng2-stompjs": "^0.6.3",
        "@swimlane/ngx-charts": "^10.0.0",
        "@types/hammerjs": "^2.0.36",
        "@types/jquery": "^3.3.10",
        "@types/mousetrap": "^1.6.2",
        "angular-switchery-ios": "^2.0.0",
        "angular2-text-mask": "^9.0.0",
        "angulartics2": "^7.2.3",
        "chart.js": "^2.6.0",
        "classlist.js": "^1.1.20150312",
        "core-js": "^2.4.1",
        "date-fns": "^1.29.0",
        "easy-pie-chart": "~2.1.7",
        "file-saver": "^2.0.0",
        "flatted": "^2.0.1",
        "g": "^2.0.1",
        "hammerjs": "^2.0.8",
        "icheck": "^1.0.2",
        "ionicons": "^4.5.1",
        "jquery": "^3.3.1",
        "jquery-slimscroll": "^1.3.8",
        "jquery-ui-dist": "^1.12.1",
        "jwt-decode": "^2.2.0",
        "mousetrap": "^1.6.3",
        "ng-drag-drop": "^5.0.0",
        "ng2-tooltip-directive": "2.8.17",
        "ngx-bootstrap": "5.1.2",
        "ngx-cookie-service": "^2.1.0",
        "ngx-easypiechart": "^0.1.7",
        "ngx-progressbar": "^2.1.1",
        "ngx-tinymce": "^7.0.0",
        "ngx-toastr": "^9.1.1",
        "node": "^11.15.0",
        "npm": "^6.7.0",
        "ol": "^5.1.3",
        "popper.js": "^1.14.4",
        "rxjs": "^6.2.2",
        "rxjs-compat": "^6.2.2",
        "web-animations-js": "^2.3.1",
        "zone.js": "^0.8.26",
        "ngx-infinite-scroll": "7.0.0"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "~0.13.9",
        "@angular/cli": "^7.2.15",
        "@angular/compiler-cli": "^7.2.15",
        "@angular/language-service": "^7.2.15",
        "@types/jasmine": "~3.3.1",
        "@types/jasminewd2": "~2.0.6",
        "@types/node": "~10.12.12",
        "codelyzer": "^4.5.0",
        "jasmine-core": "~3.3.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~3.1.3",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "^2.0.4",
        "karma-jasmine": "~2.0.1",
        "karma-jasmine-html-reporter": "^1.4.0",
        "protractor": "~5.4.1",
        "ts-node": "~7.0.1",
        "tslint": "~5.11.0",
        "typescript": "3.1.6"
    }
}

I have a pretty old setup, but am not able to upgrade (due to lack of time) it yet.

For now, I'm really stuck...

[Ks89]

@DariusLT yes it's posibile, however I don't include any dependency directly into the library, because I'm using only peer dependencies. I you want to try to force dependencies to the one defined in my package.json you can try.

Please, give me some days and I'll try to fix it (probably this weekend) removing ExtendedKeyboardEvent interface from the library.

[Ks89]

PS: I really suggest to upgrade your projects because Angular 7 is very old. When I'll publish v8.0.0, version 7.x.x will abandoned for sure.

[DariusLT]

I found out, that the error was really due to the stupid ^ and ~. Removing it, solved my problem.

My conclusion of this experience is to get rid of all those ^ from my dependencies in order to have FULL control of my code instead of having automatic updates. I know, I lose the advantage of this feature, but I rather know exactly what's going on, instead of running into a miracle without having changed anything.

@Ks89 : Removing the ExtendedKeyboardEvent interface is a good idea anyhow, since it always comes back and by the way, thanks for your quick answers and this wonderful project!

[jjbenitez026]

I found out, that the error was really due to the stupid ^ and ~. Removing it, solved my problem.

My conclusion of this experience is to get rid of all those ^ from my dependencies in order to have FULL control of my code instead of having automatic updates. I know, I lose the advantage of this feature, but I rather know exactly what's going on, instead of running into a miracle without having changed anything.

@Ks89 : Removing the ExtendedKeyboardEvent interface is a good idea anyhow, since it always comes back and by the way, thanks for your quick answers and this wonderful project!

Hi @DariusLT: Exactly that happens to me. It is quite weird because I am using the gallery without any problem in another application with Angular 10, however in angular 9 it does not work.

Would it be too much trouble if you told me exactly what changes you made to the dependencies to eliminate the problem?

Thanks in advance

[DariusLT]

Sure, we are all in the same boat! ;)

The npm package manager is somehow smart in updating and keeping your versions up-to-date and the idea behind is very intelligent, but...

...the software is still being developed by human and we all make mistakes. Therefore, using the carets ^ is a nice idea, but if there is a compatibility issue, you are stuck.

Usage of this feature is very well explained here.

Since I already had a couple of times this "miracle" during the development, I'm getting a rid of this features inside my dependencies.

[DariusLT]

Would it be too much trouble if you told me exactly what changes you made to the dependencies to eliminate the problem?

@jjbenitez026 Remove all ^ from your dependencies e.g.

change from:

"hammerjs": "^2.0.8",
"mousetrap": "^1.6.5"

to:

"hammerjs": "2.0.8",
"mousetrap": "1.6.5"

[jjbenitez026]

I made the changes, delete node_modules and package-lock.json but I still get the same error.

Angular CLI: 9.0.6
Node: 12.13.1
OS: linux x64

Angular: 9.0.6
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker
Ivy Workspace: Yes

package.json:

{
  "name": "app",
  "version": "0.0.0",
  "scripts": {
   ...
  },
  "private": true,
  "dependencies": {
    ....
    "@ks89/angular-modal-gallery": "7.2.5",
    "hammerjs": "2.0.8",
    "mousetrap": "1.6.5"
  },
  "devDependencies": {
     ...
    "@types/mousetrap": "1.6.4",
    "@types/hammerjs": "2.0.36"
  }
}

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2015",
    "resolveJsonModule": true,
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

It must be related to the fact that it does not recognize the type ExtendedKeyboardEvent, because if I edit that file and change the ExtendedKeyboardEvent to any, the error disappears.

[DariusLT]

It must be related to the fact that it does not recognize the type ExtendedKeyboardEvent, because if I edit that file and change the ExtendedKeyboardEvent to any, the error disappears.

I wouldn't do it, because if you run npm install next time, your changes will be overwritten and your problem will come back

[DariusLT]

So, what is the error message?

[jjbenitez026]

I wouldn't do it, because if you run npm install next time, your changes will be overwritten and your problem will come back

Yes of course that is not the solution :)

So, what is the error message?

The same as this issue

ERROR in node_modules/@ks89/angular-modal-gallery/lib/services/keyboard.service.d.ts:28:21 - error TS2304: Cannot find name 'ExtendedKeyboardEvent'.

28     add(onBind: (e: ExtendedKeyboardEvent, combo: string) => any): void;

[Ks89]

7.2.6 published without ExtendedKeyboardEvent I close the issue because fixed, however please let me know if everything is ok. If not, don't esitate to re-open this issue.

[DariusLT]

Thanks Ks89! I can confirm, now it's working.

[lucasnpinheiro]

Good night, the problem still remains, in version 7.2.6

I'll send a printout of the error for verification.

[Ks89]

No this is not the same error. Which version of angular are you using? Do you have an example code to run to try it?