Error importing external angular module at runtime

I have been trying to dynamically load an external angular module (AppA) into another angular application (AppB) at runtime.

AppA is created with angular-cli, compiled with ngc and packaged with rollupjs. Perfect.

I have two cases:

AppB completely configured with SystemJS. It can load AppA using System.import instruction without problems.
AppB created with angular-cli. There has not been a way to make it work.

In the second case, I have two subcases:

I tried to import on this way but it does not let compile because it does not find the module in its own application.

declare var System;

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

But when trying to load the previously compiled library with rollupjs in umd.js format, the following error appears:

The other option has been to implement the following code:

// 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);
      });

  }

}

but when executing it, it returns the following error that I have not been able to solve.

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_ ()

Code of second subcase is here github code

Any help will be appreciated

Recommended topics

Hot tags