sharedModules into multiple completely different apps

Question

I did the same thing he did here: How to correctly import the Angular Material module through a shared module in Angular 4?

Except that I want to create an ui-kit like template then use it in different apps with different locations(they are not in same folder).

Currently, I'm doing that and everything works fine except when I try to use library inside my sharedComponent, like when I want to use :

<button mat-raised-button color="primary">Click me!</button>

angular material button,

angular-cli doesn't throw any error , I just see this error on console:

Error: StaticInjectorError[ElementRef]: 
  StaticInjectorError[ElementRef]: 
    NullInjectorError: No provider for ElementRef!
    at _NullInjector.get (core.js:993)
    at resolveToken (core.js:1281)
    at tryResolveToken (core.js:1223)
    at StaticInjector.get (core.js:1094)
    at resolveToken (core.js:1281)
    at tryResolveToken (core.js:1223)
    at StaticInjector.get (core.js:1094)
    at resolveNgModuleDep (core.js:10878)
    at NgModuleRef_.get (core.js:12110)
    at resolveDep (core.js:12608)
BtnComponent.html:3 ERROR TypeError: Cannot read prop

and couldn't find anything useful by googling.

any tips can be helpful

update:

i have created a github repository that will reproduce error.

https://github.com/molikh/shared-module

i have wrote an issue with more explanation in angular material repository too : https://github.com/angular/material2/issues/9294#event-1416171140

Answer 1

I found one solution for my problem.

I build some libraries out of my components and then installed them inside my other apps.

Here is a complete tutorial about it :

https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e