将模块分成多个完全不同的应用程序

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).

除了我想创建一个ui-kit类似的模板，然后在不同的应用程序中使用不同的位置(它们不在同一个文件夹中)。

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 :

目前，我正在这样做，除了在sharedComponent中使用库之外，一切都很正常，比如我想使用:

<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:

cli没有抛出任何错误，我只是在控制台看到这个错误:

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.

我创建了一个github存储库，它将重新生成错误。

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

我还写了一个关于角材质仓库的问题:https://github.com/angular/material2/issues/9294#event-1416171140

2 个解决方案

#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

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

#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

在我的例子中，问题是我在包模块中没有导入BrowserModule，而我导出这个指令，所以我所做的就是导入它并将它添加到导入数组中。

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 { }

#1