Ошибка импорта внешнего углового модуля во время выполнения

Я пытался динамически загружать внешний угловой модуль (AppA) в другое угловое приложение (AppB) во время выполнения.

AppA создан с помощью angular-cli, скомпилирован с помощью ngc и упакован с помощью rollupjs. Идеальный.

У меня два случая:

  • AppB полностью настроен с помощью SystemJS. Он может без проблем загружать AppA с помощью инструкции System.import.
  • AppB, созданный с помощью angular-cli. Не было способа заставить его работать.

Во втором случае у меня есть два подкейса:

  • Я пытался импортировать таким образом, но он не дает скомпилировать, потому что не находит модуль в своем приложении.

declare var System;

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

Но при попытке загрузить ранее скомпилированную библиотеку с rollupjs в формате umd.js появляется следующая ошибка:

  • Другой вариант заключался в реализации следующего кода:

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

Любая помощь будет оценена


person Dani Andújar    schedule 15.11.2017    source источник
comment
Но при попытке загрузить ранее скомпилированную библиотеку с rollupjs в формате umd.js - это AppA или AppB? Может ли angular-cli объединять модули UMD с накопительным пакетом? Кроме того, какое приложение вы импортируете?   -  person Max Koretskyi    schedule 16.11.2017
comment
AppB импортирует/загружает AppA, где AppA компилируется с помощью ngc и упаковывается с помощью rollupjs. В репозитории AppA называется ViewA, а AppB — интерфейсом. @AngularInDepth.com   -  person Dani Andújar    schedule 16.11.2017
comment
выполнено npm start, проект Angular CLI открыт, ничего не загружено   -  person Max Koretskyi    schedule 16.11.2017
comment
@AngularInDepth.com Следуйте этим инструкциям в следующем порядке (помните, что вам нужен плагин CROS для chrome, чтобы включить запросы. Серверы прослушивают разные порты самого приложения): Terminal session 1 cd backend npm install npm start server listening на порту 5000 Terminal session 2 cd serverA npm install npm start сервер прослушивает порт 5001 Terminal session 3 cd frontend npm install npm start Перейдите на localhost: 4200 и нажмите кнопку ViewA. Откройте консоль браузера и посмотрите на ошибку.   -  person Dani Andújar    schedule 16.11.2017
comment
слишком много шагов, извините, нет времени   -  person Max Koretskyi    schedule 16.11.2017
comment
@AngularInDepth.com вы знаете, как решить эту ошибку?   -  person Dani Andújar    schedule 17.11.2017
comment
жаль нет времени смотреть   -  person Max Koretskyi    schedule 17.11.2017
comment
@AngularInDepth.com: столкнулся с той же ошибкой. Раньше это работало с угловой версией 5.0.0, но не работает с 5.0.2.   -  person cvraman    schedule 21.11.2017
comment
@cvraman, не могли бы вы поделиться решением для angular 5.0?   -  person Dani Andújar    schedule 21.11.2017
comment
У меня есть аналогичная проблема в этой теме: stackoverflow.com/questions/47342589/. Вы можете взглянуть на это воспроизведение ошибки: github.com/thyb/repro-dynamic- loading - Если это может помочь кому-то воспроизвести проблему.. :)   -  person Thibaud Arnault    schedule 05.12.2017
comment
У кого-нибудь это работает, я натыкаюсь на тот же кирпич на дороге. Создал для него отдельный вопрос; stackoverflow.com/questions/50149016/   -  person Lars Meijdam    schedule 03.05.2018
comment
Я создал репозиторий на github с решением, которое может помочь. Он использует библиотеки Angular 6 и базовые приложения 1, которые лениво загружают связанные библиотеки UMD; github.com/lmeijdam/angular-umd-dynamic-example Если у вас есть любые предложения, пожалуйста, не стесняйтесь добавлять!   -  person Lars Meijdam    schedule 09.05.2018
comment
@LarsMeijdam Мне очень интересно взглянуть на ваше репо. Но ссылка дает мне 404. Есть ли способ попасть в репо? Спасибо!   -  person mgm87    schedule 17.05.2018
comment
@mgm87 Мне действительно нужно было отключить его из-за политики компании ... к сожалению. Если вы заинтересованы в обзоре, сообщите мне об этом по адресу [email protected], и мы посмотрим, что возможно.   -  person Lars Meijdam    schedule 17.05.2018