Question

我一直在尝试在运行时将外部角度模块（AppA）动态加载到另一个角度应用程序（AppB）中。

使用angular-cli创建

AppA ，使用ngc编译并使用rollupjs打包。完美。

我有两个案例：

AppB 完全使用SystemJS进行配置。它可以毫无问题地使用System.import指令加载 AppA 。
AppB 。没有办法让它发挥作用。

在第二种情况下，我有两个子句：

我尝试以这种方式导入，但它不允许编译，因为它在自己的应用程序中找不到该模块。

declare var System;

System.import('http://url-module.umd.js')

但是当尝试使用umd.js格式的rollupjs加载以前编译的库时，会出现以下错误：

另一个选项是实现以下代码：

// ANGULAR
import { Component, ComponentFactory, ComponentFactoryResolver, Injector, Input, NgModuleFactory, NgModuleRef, OnInit, ViewContainerRef, ViewChild } from '@angular/core';

// CLASSES
import { MetadataModule } from '../../classes/metadata-module';
import { ModuleData } from '../../classes/module-data';

// SERVICES
import { ModuleService } from '../../services/module.service';

@Component({
  selector: 'dynamic-component-loader',
  template: ''
})
export class DynamicLoaderComponent implements OnInit {

  @Input('moduleData') moduleData: ModuleData;
  private factorySuffix: string = 'NgFactory';
  private pluginEntryPointToken: string = 'PLUGIN_ENTRY_POINT';

  constructor(
    private injector: Injector,
    private _resolver: ComponentFactoryResolver,
    private moduleService: ModuleService,
    private viewRef: ViewContainerRef,
  ) { }

  ngOnInit() {
    this.moduleService.loadMetadataFile(this.moduleData.metadata)
      .subscribe((metadataModule: MetadataModule) => {
        const script: HTMLScriptElement = document.createElement('script');
        script.src = this.moduleData.library;
        script.onload = () => {
          console.log('script loaded');
          const moduleFactory: NgModuleFactory<any> = window[metadataModule.name][metadataModule.moduleName + this.factorySuffix];
          const moduleRef: NgModuleRef<any> = moduleFactory.create(this.injector);
          const compType = moduleRef.injector.get(this.pluginEntryPointToken);
          const compFactory: ComponentFactory<any> = moduleRef.componentFactoryResolver.resolveComponentFactory(compType);
          this.viewRef.createComponent(compFactory);
        };
        document.head.appendChild(script);
      });

  }

}

但在执行时，它会返回以下我无法解决的错误。

ERROR Error: StaticInjectorError[RendererFactory2]: 
  StaticInjectorError[RendererFactory2]: 
    NullInjectorError: No provider for RendererFactory2!
    at _NullInjector.get (core.js:923)
    at resolveToken (core.js:1211)
    at tryResolveToken (core.js:1153)
    at StaticInjector.get (core.js:1024)
    at resolveToken (core.js:1211)
    at tryResolveToken (core.js:1153)
    at StaticInjector.get (core.js:1024)
    at resolveNgModuleDep (core.js:10585)
    at NgModuleRef_.get (core.js:11806)
    at Object.debugCreateRootView [as createRootView] (scripts.bundle.js:35597)
    at ____________________Elapsed_12_ms__At__Wed_Nov_15_2017_16_58_27_GMT_0100__CET_ ()
    at Object.onScheduleTask (scripts.bundle.js:122)
    at ZoneDelegate.scheduleTask (zone.js:405)
    at Object.onScheduleTask (zone.js:301)
    at ZoneDelegate.scheduleTask (zone.js:405)
    at Zone.scheduleTask (zone.js:236)
    at Zone.scheduleEventTask (zone.js:262)
    at HTMLScriptElement.eval [as addEventListener] (zone.js:1832)
    at HTMLScriptElement.desc.set [as onload] (zone.js:1216)
    at ____________________Elapsed_13_ms__At__Wed_Nov_15_2017_16_58_27_GMT_0100__CET_ ()

第二个子案例的代码在这里github code

任何帮助将不胜感激

在运行时

0 个答案: