Sharing a third party directive in multiple angular components -

i trying use this library in angular 4 project derived this project. works fine when import library's module in component module. example, have login component has login.module.ts:

import { ngmodule, } '@angular/core'; import { loadingmodule } 'ngx-loading'; import { login } './login.component';   @ngmodule({   imports: [     loadingmodule,   ],   declarations: [     login   ] }) export class loginmodule { } 

above works fine.

however, don't want import module in every component creates duplicate code. hence created shared module , imported shared module in login component's module , register component's module.

something this:

import { ngmodule } '@angular/core'; import { loadingmodule } 'ngx-loading';  @ngmodule({     imports: [         loadingmodule,     ], })  export class sharedmodules {  } 

tried importing in login.module:

import { sharedmodules } '../../sharables/shared.module';  @ngmodule({   imports: [     sharedmodules,   ],   declarations: [     login   ] }) export class loginmodule { } 

i have imported sharedmodules in main app.module.

above throws following error:

can't bind 'show' since isn't known property of 'ngx-loading'. 1. if 'ngx-loading' angular component , has 'show' input, verify part of module. 2. if 'ngx-loading' web component add 'custom_elements_schema' '@ngmodule.schemas' of component suppress message. 3. allow property add 'no_errors_schema' '@ngmodule.schemas' of component. 

1. how can achieve in angular 4?
2. i understand why approach not working , missing here?

found answer. this article.

to else having same problem:

it scope problem. imported loadingmodule in sharedmodules loadingmodule's directives limited scope of sharedmodules. in order other components (login/registers etc..) importing sharedmodules able access sharedmodules import (loadingmodule in case), must export them.

once exported, loadingmodule sharedmodules; login component able access loadingmodule's directives

import { ngmodule } '@angular/core'; import { loadingmodule } 'ngx-loading';  @ngmodule({     imports: [         loadingmodule,     ],     exports: [         loadingmodule     ] })  export class sharedmodules {  }