Search code examples
angularscrollslimscroll

angular-io-slimscroll not working in modules


I am using angular-io-slimscroll for scrolling. I have two modules in which I require this plugin.

If I add this plugin in both of the modules then there is this error, which I understand that I cannot declare component in 2 modules

Console Error 1 Figure 1

So I declare plugin in app.module, logically this is fine and both of the modules should be able to do this but I am facing this error

Console Error 2 Figure 2

Note: Now I am converting everything into modules for better structure, before converting I have all things as components and the plugin is working at that stage but not in multiple modules.

Kindly help me to solve this or tell me any good alternative, Thanks


Solution

  • Slimscroll is a directive and you can't import it into multiple modules.

    Create a shared module and import Slimscroll into declarations of the module.

    Also you must export it and import the shared module into the modules you want to use it.

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { SlimScroll } from 'angular-io-slimscroll';
    
    @NgModule({
      imports: [
        CommonModule
      ],
      declarations: [
        SlimScroll
      ],
      exports: [
        SlimScroll
      ]
    })
    export class SharedModule { }
    

    in the other modules just import SharedModule

    import { SharedModule } from './shared.module';
    
    @NgModule({
      imports: [
        // other imports
        SharedModule
      ]       
    })
    export class OtherModule { }