Angular5：动态部件加载-静态喷油器错误，具有@angular/core相关性

Question

我正在将一个electron应用程序从AngularJS迁移到Angular5，我面临的问题是，我需要加载一个带有组件的任意模块，并动态地将主组件呈现到视图中（这是一个附加系统）。在我的应用程序中，插件是一个angular5模块，其中包含一个在angular5应用程序中呈现的组件。

我动态加载组件，如下所示：

@ViewChild("view", { read: ViewContainerRef })
view: ViewContainerRef;

constructor(
  // ...
  private compiler: Compiler,
  private injector: Injector,
  private moduleRef: NgModuleRef<any>
) {}

然后，

const addonModule = addonObject.getModule();
this.compiler
  .compileModuleAndAllComponentsAsync(addonModule)
  .then(factories => {
    const factory = factories.componentFactories.find(
      componentFactory =>
        addonObject.getViewComponent().name ==
        componentFactory.componentType.name
    );
    if (factory) {
      const cmpRef = factory.create(this.injector, [], null, this.moduleRef);
      cmpRef.instance.config = {
        from: "[e-mail]",
        apikey: "dsfkjd"
      };
      this.view.insert(cmpRef.hostView);
    }
  });

它工作得很好，但是当我在模板中添加材质组件时，它在工厂失败了。create（）出现此错误：

模板：

<div>
    <button mat-button>test</button>
</div>

错误：

ERROR Error: Uncaught (in promise): Error: StaticInjectorError[Renderer2]: 
  StaticInjectorError[Renderer2]: 
    NullInjectorError: No provider for Renderer2!

或

模板：

<div fxLayout="row" fxFlex>
    test
</div>

错误：

ERROR Error: Uncaught (in promise): Error: StaticInjectorError[MediaMonitor]: 
  StaticInjectorError[MediaMonitor]: 
    NullInjectorError: No provider for MediaMonitor!

材料模块似乎很好地导入到我的插件模块中，否则如果没有加载，我会有不同的行为：它忽略指令（例如

我尝试过用许多不同的方式捆绑动态模块：tsc/ngc/ng-Packagr/webpack。

当我正常（静态）导入另一个用ng-cli构建的应用程序的Ng模块时，该捆绑包正在工作。

是否有人知道如何动态渲染模板中使用了材质组件/指令的组件，如fxFlex/mat按钮/mat卡？

编辑：我在这里用SystemJS复制了这个错误：https://github.com/thyb/repro-dynamic-loading

角度：5.0。2.

角材质：5.0。0-rc1




Answer 1

正如@yurzui在注释中解释的那样，@angular/*依赖项被加载了两次。作为一种解决方法，我发现使其工作的唯一方法是使用窗口在应用程序和插件之间共享@angular对象（@angular/core，@angular/common，@angular/material）。

在我的应用程序索引中。html:

window.angular = {
    core: require("@angular/core"),
    common: require("@angular/common"),
    material: require("@angular/material"),
    ...
}

在我的插件里：

const NgModule = (window as any).angular.core.NgModule;
const CommonModule = (window as any).angular.common.CommonModule;
const MatButtonModule = (window as any).angular.material.MatButtonModule;
...

这不是很优雅（再见树摇），但至少它的工作。。。如果有人有更简单的解决方案，我认为：）

我在Gitter上遇到了一个关于“角/元素”的讨论，这个讨论看起来很有希望，因为它创建了独立/独立的网络组件，可以动态注入，而不会遇到我遇到的问题——https://www.youtube.com/watch?v=ljsOPm4MMEo