Error: No provider for KeyboardService!

[daylenlim]

Hi, I'm not sure why this error keep showing on my console log when using the angular-modal-gallery

Error: No provider for KeyboardService!

[Ks89]

Hi, please could you give more info? For instance these versions:

• angular
• nodejs
• npm

Also, which starter/template/skeleton are you using (qdouble's starter, angualrclass, angular-cli.....)?

[daylenlim]

angular 4 @angular/cli: 1.4.1 node: 6.11.2 npm: 3.10.10

[Ks89]

Is 1.4.1 the version of angular-cli? If yes, did you try to compare your config with my official demo here https://github.com/Ks89/angular-modal-gallery/tree/master/demo/angular-cli?

Also, try to clean your nod_modules folder and re-run "npm install".

[daylenlim]

well, I added a providers to @NgModule in modal-gallery.module.ts and give up the useValue set it to{}. I know that maybe will cause some effect for keyboard control, but is fine for me : )

@NgModule({ imports: [ CommonModule ], declarations: [ AngularModalGalleryComponent, UpperButtonsComponent, GalleryComponent, DIRECTIVES ], exports: [ AngularModalGalleryComponent ], providers: [ { provide: KEYBOARD_CONFIGURATION, // useValue: config ? config : {} useValue: {} }, { provide: KeyboardService, useFactory: setupRouter, deps: [ KEYBOARD_CONFIGURATION ] } ] })

[Ks89]

Yes, in that way you're simply bypassing a feature introduced with version 3.3.0.

I want to help you, but I can't without all information and also a minimal example on Github to test it by myself. This is possibly a bug, but it so weird that I cannot confirm it, because I cannot reproduce this issue.

If you check in my repo, I have unit testing + 3 different working example here: https://github.com/Ks89/angular-modal-gallery/tree/master/demo

Also, there are other 3 projects with this library inside based on both qdouble's starter HERE and angularclass starter HERE and a personal project HERE.

In all this projects I never saw this issue.

So, if you want, you should really share a minimal example. Otherwise, It will be impossible for me to help you. Could you share a minimal example based on your angular-cli's project that I can run on my pc?

[Ks89]

If you can't share an minimal demo, for instance because you are working for a company and the source code is copyrighted, could you share at least the structure of your app?

For instance, where are you importing ModalGallery module, if in the main module/lazy module or in another place.... if his problem happens with AOT or JIT....if you are using angular universal... I mean, some information about what are you doing :)

Obviously, this is a desperate solution, because it will be really difficult to understand the problem, but something is better than nothing :)

Thank for the patience and I'll hope to find a solution with your help XD

[daylenlim]

I have been created a complete new project to replicate this issue, the result are still the same, Error: No provider for KeyboardService. The project size is to large unable to upload from here.

below is the steps for the scenario ->

1.ng new [my-app] <- create new angular 4 project 2.npm install --save font-awesome 3.npm install --save hammerjs mousetrap 4.npm install --save angular-modal-gallery 5.npm install --save-dev @types/mousetrap 6.npm install --save-dev @types/hammerjs

7. add these lines to app.module.ts

   
   import 'hammerjs';
   import 'mousetrap';
   import { ModalGalleryModule } from 'angular-modal-gallery';

@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, ModalGalleryModule ], providers: [], bootstrap: [AppComponent] })

8.  **app.component.html**

<modal-gallery [downloadable]="true" [buttonsConfig]="{extUrl: true}" [modalImages]="imagesArray">

9. **app.component.ts**

imagesArray: Array = [ new Image( '../assets/images/banner1.jpg', null, // no thumb null, // no description 'http://www.google.com'), new Image( '../assets/images/banner2.jpg', null, // no thumb 'Description 2', 'http://www.google.com'),];

[Ks89]

Oh yes, that makes sense! I thought that was weird :)

You forgot to add .forRoot(), so KeyboardService will be never available as a service.

Please read section "Installation" here: https://ks89.github.io/angular-modal-gallery.github.io/gettingStarted

This is a common design pattern for Angular libraries.

Hope this will fix your issue.

[daylenlim]

Oh yeah, It's my bad : ( anyway, thanks for your helps : ) looking forward to the version 4.0 to solve the modal issues 💯 thanks again 👍

[Ks89]

very good. Issue closed.

Yes, I will try to add it to 4.0.0, but I suppose that it will be quite difficult. I schedule that feature with low priority because I have to add other things with very high priority. If I won't introduce that for 4.0.0 I'll re-schedule it for 4.x.x versions