Ks89/angular-modal-gallery

Error: No provider for KeyboardService!

daylenlim opened this issue · 10 comments

daylenlim commented

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 commented

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 commented

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

Ks89 commented

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 commented

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 commented

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 commented

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 commented

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

  1. 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]
})
  1. app.component.html
<modal-gallery [downloadable]="true" [buttonsConfig]="{extUrl: true}" [modalImages]="imagesArray">
</modal-gallery>
  1. app.component.ts
imagesArray: Array<Image> = [
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 commented

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.

  • 👍1
  • 🎉1
  • ❤️1
  • 🚀1
daylenlim commented

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 commented

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