4

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

Improve this question
14
  • But when trying to load the previously compiled library with rollupjs in umd.js format - is it AppA or AppB? Can angular-cli bundle UMD modules with rollup? Also, which app are you importing it? Commented Nov 16, 2017 at 6:22
  • AppB imports / loads AppA, where AppA is compiled with ngc and packaged with rollupjs. In the repo AppA is ViewA and AppB is frontend. @AngularInDepth.com Commented Nov 16, 2017 at 7:36
  • executed npm start, Angular CLI project is open, nothing is loaded Commented Nov 16, 2017 at 11:04
  • @AngularInDepth.com Follow this instructions in this order (remember that you need to have a CROS pluggin for chrome to enable requests. The servers are listening in different ports of the application itself): Terminal session 1 cd backend npm install npm start server listening on port 5000 Terminal session 2 cd serverA npm install npm start server listening on port 5001 Terminal session 3 cd frontend npm install npm start Go to localhost:4200 and click button ViewA. Open browser console and look the error. Commented Nov 16, 2017 at 13:53
  • too many steps, sorry, don't have time Commented Nov 16, 2017 at 17:18
Related questions
7
SystemJS will not load angular2 from node_modules
1
System.import in angular 2 always try to import from url
5
Importing Node modules into Angular 2
Load 7 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.