Я пытался динамически загружать внешний угловой модуль (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
Любая помощь будет оценена
AppA
илиAppB
? Может ли angular-cli объединять модули UMD с накопительным пакетом? Кроме того, какое приложение вы импортируете? - person Max Koretskyi   schedule 16.11.2017npm start
, проект Angular CLI открыт, ничего не загружено - person Max Koretskyi   schedule 16.11.2017