sharedModules分成多个完全不同的应用程序

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

Answer 2

In my case, the problem was that I had not imported BrowserModule in my package module from which I was exporting the directive so all I did was to import it and add it to imports array

Like this

import { NgModule } from '@angular/core';
import { myDirective } from './my.directive';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports: [BrowserModule
  ],
  declarations: [myDirective],
  exports: [myDirective],
})
export class ImageHelperModule { }

Answer 3

I expressed the same same problem, when I tried to import module from sub-project which have its own node_modules directory. Building of the library into ./dist directory of "host" project and importing from there solves the issue.