brtnshrdr / angular2-hotkeys Goto Github PK

Getting an error when compiling with Angular-CLI

ERROR in Error encountered resolving symbol values statically. Calling function 'InjectionToken', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol HotkeyOptions in /Users/username/git/foo/node_modules/angular2-hotkeys/src/hotkey.options.d.ts, resolving symbol HotkeyModule.forRoot in /Users/username/git/foo/node_modules/angular2-hotkeys/index.d.ts, resolving symbol AppModule in /Users/username/git/foo/src/app/app.module.ts, resolving symbol AppModule in /Users/username/git/foo/src/app/app.module.ts
webpack: Failed to compile.

The issue is that when I have two single letters for hotkey the event is triggered even when I press only one of both letters.
For example:
new Hotkey('g+w', () => {})
Now when I press "g+w" it works great, but when I press only "w" the same event is triggered.
Any suggestions? Thank you!

I can't import InjectionToken from @angular/core
because It not exist

Hi.
Thank you for this nice work.
just after adding lots of shortcuts, cheat sheet page dose not scroll and only shows first items.

i am using version 1.0.3 for angular 2.4.7

I can pass cheatSheetDescription string on initialization in module imports:
@NgModule({ imports: [HotkeyModule.forRoot( { cheatSheetDescription: 'Description 123' })})

I need to have this localizable. e.g. in English and German.

Any option for that?

Getting lots of Typescript errors on not finding mousetrap, tough I did make sure I have the node_module.

this one has support for adding shortcut keys on defining route.

angular.module('myApp').config(function ($routeProvider) { $routeProvider.when('/', { controller: 'RestaurantsController', templateUrl: 'views/restaurants.html', hotkeys: [ ['p', 'Sort by price', 'sort(price)'] ] }); });

is it possible on your module? if yes can you guide me?

i am using version 1.0.3 for angular 2.4.7

hotkeys.service.ts(94,46): error TS2345: Argument of type 'string | string[]' is not assignable to parameter of type 'string'.

Can you please cast "combo" to string?

line 94:

if(this.hotkeys[i].combo.indexOf(<string>combo) > -1) { return this.hotkeys[i]; }

Currently, I receive a warning when Angular2-hotkeys is running with ng serve:

WARNING in ./~/angular2-hotkeys/src/services/hotkeys.service.ts
160:62 export 'IHotkeyOptions' was not found in './../models/hotkey.options'

I checked hotkey.options and it seems there is nothing wrong with the interface IHotkeyOptions. It is exported successfully.

import { OpaqueToken } from '@angular/core';

export interface IHotkeyOptions {
  /**
   * Disable the cheat sheet popover dialog? Default: false
   */
  disableCheatSheet?: boolean;
  /**
   * Key combination to trigger the cheat sheet. Default: '?'
   */
  cheatSheetHotkey?: string;
  /**
   * Description for the cheat sheet hot key in the cheat sheet. Default: 'Show / hide this help menu'
   */
  cheatSheetDescription?: string;
};
export const HotkeyOptions = new OpaqueToken('HotkeyOptions');

Maybe one knows what is going wrong here.

I'm experiencing a problem that my hotkeys won't work when an input or textarea is focused. It's easy to reproduce, just follow the tutorial and put an input in your template. Then click on it and your hotkey will not work until the input loses the focus.

Some more info:
Operating system: Mac OS X
Browser: Chrome 55

Code used to create and add the hotkey:

this.hotkeyService.add(new Hotkey(['shift+s'], (event: KeyboardEvent, combo: string): ExtendedKeyboardEvent => {
  this.submit(this.myForm.value);
  const e: ExtendedKeyboardEvent = event;
  e.returnValue = false;
  return e;
}));

I also tried to set the allowIn option, but it didn't help:

this.hotkeyService.add(new Hotkey(['meta+s'], (event: KeyboardEvent, combo: string): ExtendedKeyboardEvent => {
  this.submit(this.myForm.value);
  const e: ExtendedKeyboardEvent = event;
  e.returnValue = false;
  return e;
}, ['input', 'textarea', 'select'], 'Saves the form'));

Thank you for integrating MouseTrap into a reusable Angular 2 component!

I am using the BrowserStack extension in my Chrome browser, which uses the key mapping ctrl+shift+e. And when I try to use that mapping in my application, the bubbling does not get prevented.

this._hotkeysService.add(new Hotkey('ctrl+shift+e', (event: KeyboardEvent): boolean => {
     //do something;
     return false;
 }));

This is happening for multiple extensions, which leads me to believe the bubbling prevention does not work for Chrome extensions. I understand that I can disable/remove the extension from my browser, though I cannot control the Chrome extension usage of my users.

I'm trying to use sequence shortcuts on a page and unfortunately the first character of the sequence is not prevented when in an input.

    this._hotkeysService.add(new Hotkey('1 2', (event: KeyboardEvent): boolean => {
        console.log("1 2!");
        return false;
      },
      ['INPUT', 'SELECT', 'TEXTAREA']
    ));
    this._hotkeysService.add(new Hotkey('3 4', (event: KeyboardEvent): boolean => {
        console.log("3 4!");
        return false;
      },
      ['INPUT', 'SELECT', 'TEXTAREA']
    ));

The text input is getting the 1 and the 3 of these events, while skipping the 2 and 4 respectively. Based on the Mousetrap documentation, it shouldn't see any characters that are part of a sequence:

"Any key events that would normally fire for keys within a sequence will not fire if they are pressed within the context of that sequence."

It's a great plugin, so far. I am looking a new issue where cheatsheet was showing the descriptions twice in the cheatsheet list,

would be nice to be able to just give a help text for all shortcuts and have the cheatsheet autogenerated.

I've juste added the module in root module.
Refresh browser and see this error in the console

Uncaught TypeError: core_1.InjectionToken is not a constructor
    at Object.c (hotkey.options.js:3)
    at __webpack_require__ (bootstrap 82fc300…:52)

I am updating my plugins to the latest version and i came across this error. [1m[31mERROR in [default] .../node_modules/angular2-hotkeys/src/hotkeys.directive.d.ts:1:0 Cannot find type definition file for 'es6-shim'.

Can you please guide me how to resolve the issue.

Having this error due to this library not being AOT Compatible because it's not publishing metadata.

https://medium.com/@cyrilletuzi/how-to-build-and-publish-an-angular-module-7ad19c0b4464

I can raise a PR if needed.

followed your instructions and in my constructor parms HotkeysService is undefined. what is wrong>

Hy!

When you use cheatSheetCloseEsc the description can not be configured, therefore it will always show the text 'Hide this help menu' in the cheat sheet.

It would be nice to make this text configurable like the cheatSheetDescription.

WARNING in ./~/angular2-hotkeys/angular2-hotkeys.js
Cannot find source file 'angular2-hotkeys.ts': Error: Cannot resolve 'file' or 'directory' ./angular2-hotkeys.ts in C:\code\git\demosite\node_modules\angular2-hotkeys

this.hotKeyService.add(new Hotkey('ctrl+h', (event: KeyboardEvent): boolean => {
        this.exitFocusMode();
        return false;
      }));

exitFocusMode(): void {
    if (this.isFocusMode()) {
      this.state.focused = null;
      this.someservice.setMode(Service.Mode.SELECT);
    }
  }

There's no async request here yet the change in mode is not happening because return false seems to be fired before the setMode method has finished executing.

Please help. Is there any workaround?

Let's say I have the following code (aprox.):

export class SearchWidgetComponent {
    searchType:string = CONSTANTS.SEARCH_TYPE_TERM;

    constructor(private hotKeys:HotkeysService){
        this.hotKeys.add(new Hotkey(
            'l',
            (event:KeyboardEvent):KeyboardEvent => {
                this.toggleSearchMode();
                console.log(this.searchType);
                return event;
            }
        ));
    }

    toggleSearchMode():void{
        if (this.searchType == CONSTANTS.SEARCH_TYPE_TERM){
            this.searchType = CONSTANTS.SEARCH_TYPE_TRANSLATION;
        }else{
            this.searchType = CONSTANTS.SEARCH_TYPE_TERM;
        }
    }
}

In the console I can see that the value of this.searchType is being changed however it is not being changed for the same object since I don't see the changes on the template.

As far as I can tell there is a scope problem here but I am not being able to correct it nor even know if it's something fixable from angular2-hotkeys side.

Can you fix this bug? thanks a lot.

I am receiving a subscription error

ngOnDestroy@webpack:///~/angular2-hotkeys/src/directives/cheatsheet.component.ts:18:0 <- spec-bundle.js:80644:26

angular2-hotkeys does not ship with *.metadata.json files next to the *.d.ts files. This is needed for AoT compiled apps (reference).

I've written up an article with steps to generate those files. I'll make a PR, if I find time.

Currently, README does not talk about component scoped shortcuts, that gets enabled only for a given component.

The life cycle for these shortcuts should be bound to the component's lifecycle.

This functionality is supported in the angular1's plugin. I'm not sure whether this is supported as of now.

Can u confirm if this is supported as of now or not.

If supported, can u add an example to README.
If not, can u add this functionality?

Hi,
I've searched past issues but haven't found anyone related to this and I'm just curious about it. Is there any specific reason about this?

can you update cheatsheet.component.ts, please?
to this

  ngOnDestroy(): void {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }

It appears currently, there may be an instance when this.subscription is undefined.

How do I manually show/hide cheat sheet

For example:

Show cheat sheet on clicking at some dropdown menu item.
Hide cheat sheet on pressing esc.

I suggest to provide an API to manually open/close the cheat sheet.

Hi. is it possible to close cheat sheet when Esc key pressed? i am using version 1.0.3 for angular 2.4.7

Recently, when implementing Unit tests in my application I had faced with a strange error.

My stack have:

• Angular 2.1.1
• Karma
• Jasmine
• System module defined as commonjs

At same time, application run like a charm in browser.

Output error:

Chrome 54.0.2840 (Linux 0.0.0) ERROR
  Uncaught ReferenceError: require is not defined
  at node_modules/angular2-hotkeys/angular2-hotkeys.js:5

Chrome 54.0.2840 (Linux 0.0.0) ERROR
  Uncaught ReferenceError: require is not defined
  at node_modules/angular2-hotkeys/angular2-hotkeys.js:5

Module Hotkey is loaded, angular2-hotkeys.js is defined in karma paths and systemjs.config.

I noted other packages have keywords "import" and "export" of Typescript at yours "js" files in my node_modules path, but angular2-hotkeys use "require" keyword instead.

Hi,

trying to use 0.4.0, please correct what I'm doing wrong.

did npm install angular2-hotkeys --save

adding to src/app/app.module.ts onlу one line:

...
import { HotkeyModule } from 'angular2-hotkeys';
...

build results:

➜  app git:(master) ✗ ionic build

Running 'build:before' npm script before build
> ionic-app-base@ build /opt/git/ionic2
> ionic-app-scripts build
[09:04:21]  ionic-app-scripts 0.0.23
[09:04:21]  build prod started ...
[09:04:21]  clean started ...
[09:04:21]  clean finished in 7 ms
[09:04:21]  copy started ...
[09:04:21]  ngc started ...
[09:04:21]  copy finished in 31 ms
[09:04:23]  ngc error: can't resolve module /opt/git/ionic2/node_modules/angular2-hotkeys/angular2-hotkeys.d.ts from /opt/git/ionic2/node_modules/angular2-hotkeys/angular2-hotkeys.d.ts


[09:04:23]  ngc error: Error: Source file /opt/git/ionic2/node_modules/angular2-hotkeys/angular2-hotkeys.ts not present in program.
    at ReflectorHost.getMetadataFor (/opt/git/ionic2/node_modules/@angular/compiler-cli/src/reflector_host.js:222:23)
    at ReflectorHost.getResolverMetadata (/opt/git/ionic2/node_modules/@angular/compiler-cli/src/reflector_host.js:239:29)
    at ReflectorHost.resolveExportedSymbol (/opt/git/ionic2/node_modules/@angular/compiler-cli/src/reflector_host.js:253:29)
    at ReflectorHost.findDeclaration (/opt/git/ionic2/node_modules/@angular/compiler-cli/src/reflector_host.js:168:29)
    at _loop_1 (/opt/git/ionic2/node_modules/@angular/compiler-cli/src/codegen.js:52:51)
    at CodeGenerator.readFileMetadata (/opt/git/ionic2/node_modules/@angular/compiler-cli/src/codegen.js:66:13)
    at /opt/git/ionic2/node_modules/@angular/compiler-cli/src/codegen.js:100:74
    at Array.map (native)
    at CodeGenerator.codegen (/opt/git/ionic2/node_modules/@angular/compiler-cli/src/codegen.js:100:35)
    at codegen (/opt/git/ionic2/node_modules/@angular/compiler-cli/src/main.js:7:81)


[09:04:23]  ngc error: Compilation failed


[09:04:23]

[09:04:23]  bundle prod started ...
[09:04:23]  Error: Could not resolve entry (.tmp/app/main.prod.js)
    at /opt/git/ionic2/node_modules/rollup/dist/rollup.js:8602:28
    at process._tickCallback (internal/process/next_tick.js:103:7)

[09:04:23]  sass started ...
[09:04:25]  sass finished in 1.59 s
[09:04:25]  minify started ...
[09:04:25]  cleancss started ...
[09:04:25]  uglifyjs started ...
[09:04:25]  Error: ENOENT: no such file or directory, open '/opt/git/ionic2/www/build/main.js'
    at Error (native)
    at Object.fs.openSync (fs.js:640:18)
    at Object.fs.readFileSync (fs.js:508:33)
    at addFile (/opt/git/ionic2/node_modules/uglify-js/tools/node.js:68:22)
    at /opt/git/ionic2/node_modules/uglify-js/tools/node.js:79:17
    at Array.forEach (native)
    at Object.exports.minify (/opt/git/ionic2/node_modules/uglify-js/tools/node.js:77:26)
    at runUglifyInternal (/opt/git/ionic2/node_modules/@ionic/app-scripts/dist/uglifyjs.js:34:19)
    at runUglify (/opt/git/ionic2/node_modules/@ionic/app-scripts/dist/uglifyjs.js:23:28)
    at Object.uglifyjs (/opt/git/ionic2/node_modules/@ionic/app-scripts/dist/uglifyjs.js:9:12)

[09:04:25]  cleancss finished in 832 ms
[09:04:25]  minify finished in 832 ms
[09:04:25]  build prod finished in 4.66 s
✗ You cannot run iOS unless you are on Mac OSX.
Press any key to continue...

He bro,

Could you please give me a suggestion?
When I apply this in my project, with angular version is 2.4.10
I've got error message when I build the project.
That is follow:

ERROR in src/XenaUI/node_modules/angular2-hotkeys/src/hotkey.options.d.ts (1,10): Module '"src/XenaUI/node_modules/@angular/core/index"' has no exported member 'InjectionToken'.

ERROR in Error encountered resolving symbol values statically. Calling function 'InjectionToken', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol HotkeyOptions in src/XenaUI/node_modules/angular2-hotkeys/src/hotkey.options.d.ts, resolving symbol HotkeyModule.forRoot in src/XenaUI/node_modules/angular2-hotkeys/index.d.ts, resolving symbol AppModule in src/XenaUI/src/app/app.module.ts, resolving symbol AppModule in src/XenaUI/src/app/app.module.ts

how can i use mouse click with shift key combination

Looking at the code, it looks like if I call .remove it will remove all but it always seems to leave one.. ?

Took me a bit to figure this one out. I was getting blank CheatSheet besides default ? sheet toggle. After looking at the model I added null for allowIn then the description string. Now they show up as expected.

        this.hotkeysService.add(new Hotkey('f1', (event: KeyboardEvent): boolean => {
            this.router.navigate(['/dashboard']);
            return false; // Prevent bubbling
        }, null, 'DESCRIPTION FOR CHEATSHEET GOES HERE'));

Just wondering... would be very cool if I could use this with the latest angular release.

Thanks.

Steps to reproduce:

1. Install angular2-hotkeys using npm install angular2-hotkeys --save
2. Stop the npm application
3. Run npm start

$ npm start

[email protected] start /Workspace/osr-spa-angular2
tsc && concurrently "tsc -w" "lite-server"

node_modules/angular2-hotkeys/src/directives/hotkeys.directive.ts(11,110): error TS2304: Cannot find name 'ExtendedKeyboardEvent'.
node_modules/angular2-hotkeys/src/directives/hotkeys.directive.ts(13,24): error TS2304: Cannot find name 'MousetrapInstance'.
node_modules/angular2-hotkeys/src/directives/hotkeys.directive.ts(18,30): error TS2304: Cannot find name 'Mousetrap'.
node_modules/angular2-hotkeys/src/services/hotkeys.service.ts(3,25): error TS2307: Cannot find module 'mousetrap'.

I've just done a fresh npm install and I'm getting the following errors...

C:/Projects/TFS/LOTSWeb/Main/Source/Lots.Web/src/Lots.Web.UI/node_modules/angular2-hotkeys/src/directives/hotkeys.directive.ts(11,110): error TS2304: Cannot find name 'ExtendedKeyboardEvent'.
C:/Projects/TFS/LOTSWeb/Main/Source/Lots.Web/src/Lots.Web.UI/node_modules/angular2-hotkeys/src/directives/hotkeys.directive.ts(13,24): error TS2304: Cannot find name 'MousetrapInstance'.
C:/Projects/TFS/LOTSWeb/Main/Source/Lots.Web/src/Lots.Web.UI/node_modules/angular2-hotkeys/src/directives/hotkeys.directive.ts(18,30): error TS2304: Cannot find name 'Mousetrap'.
C:/Projects/TFS/LOTSWeb/Main/Source/Lots.Web/src/Lots.Web.UI/node_modules/angular2-hotkeys/src/services/hotkeys.service.ts(9,16): error TS2304: Cannot find name 'MousetrapInstance'.
C:/Projects/TFS/LOTSWeb/Main/Source/Lots.Web/src/Lots.Web.UI/node_modules/angular2-hotkeys/src/services/hotkeys.service.ts(14,9): error TS2304: Cannot find name 'Mousetrap'.
C:/Projects/TFS/LOTSWeb/Main/Source/Lots.Web/src/Lots.Web.UI/node_modules/angular2-hotkeys/src/services/hotkeys.service.ts(21,36): error TS2304: Cannot find name 'Mousetrap'.
C:/Projects/TFS/LOTSWeb/Main/Source/Lots.Web/src/Lots.Web.UI/node_modules/angular2-hotkeys/src/services/hotkeys.service.ts(9,16): error TS4031: Public property 'mousetrap' of exported class has or is using private name 'MousetrapInstance'.

After installing the module my TSLint (preconfigured by the angular-cli) fails with the following error:

> tslint "src/**/*.ts" --project src/tsconfig.json --type-check && tslint "e2e/**/*.ts" --project e2e/tsconfig.json

/Users/emin93/WebstormProjects/my-project/node_modules/tslint/lib/runner.js:91
                    throw new Error(messages.join("\n"));
                    ^

Error: Error at /Users/emin93/WebstormProjects/my-project/node_modules/angular2-hotkeys/src/hotkeys.directive.d.ts:1:1: Cannot find type definition file for 'es6-shim'.
    at Runner.run (/Users/emin93/WebstormProjects/my-project/node_modules/tslint/lib/runner.js:91:27)
    at Object.<anonymous> (/Users/emin93/WebstormProjects/my-project/node_modules/tslint/lib/tslint-cli.js:138:6)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/emin93/WebstormProjects/my-project/node_modules/tslint/bin/tslint:3:1)

The angular2-hotkeys module has @types/es6-shimdefined in the package.json, so it should work. I also tried reinstalling the node modules (rm -rf node_modules && npm install) but it didn't help.

Hey there! Would you please publish the latest version (2.0.2) of this repo to NPM? Excited to use the new escape key functionality.

Thank you for your time!

If its possible add pls to readme that you need to do npm install @types/mousetrap --save-dev;

By adding a directive hotkeys could be easily linked for examle to a button.

<button [angularHotKey]="[17,78]">New Document</button>
<!-- CTRL = 17 & n = 78 -->

Suppose i have a form and i open a modal on ctrl+N but if modal is open and i press ctrl+N it again open a modal over modal and so on is there any option to solve this issue.

Hello guys,
You have a nice library but now I can't use it because I cant override _preventIn field.
Our customer want to set focus from an input to another input by hotkey.
Could you please add possibility to change _preventIn field (make it protected or inject it to constructor)?

Thanks in advance!

So, when i use the hotkey to toggle or open a dropdown. The focus isn't setting to that element.
Do we explicitly set the focus for each hotkey??

Could you please possibility to change template of hotkeys cheatsheet?

Please advice,
Thanks in advance

this.hotkeysService.add(new Hotkey('a+b', (event: KeyboardEvent): boolean => {
// setting focus here
return false;
}));

Here in this example, new Hotkey() was been caught in tslint and in the cmd saying that it Cannot find name 'Hotkey'.

followed your instructions and not work