无法动态传输ES模块需要通过SystemJS.config配置加载程序插件

Question

我正在尝试构建可插入的应用程序，在导入之前，一切都很好插件应用程序中的"ngx-bootstrap"one_answers"FullCalendarModule"/priming。当我导入这些模块中的任何一个时，都会出现此错误。

ERROR Error: Uncaught (in promise): Error: Unable to dynamically transpile ES module
A loader plugin needs to be configured via `SystemJS.config({ transpiler: 'transpiler-module' })`.
Instantiating http://localhost:4200/assets/plugins/cms-plugin.bundle.js
Loading assets/plugins/cms-plugin.bundle.js

---

在插件应用程序中，我正在使用Rollup进行打包这是我的rolupp.config.js

import angular from 'rollup-plugin-angular';
import resolve from 'rollup-plugin-node-resolve';

import typescript from 'rollup-plugin-typescript2';
import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';
import copy from "rollup-plugin-copy";
//import babel from 'rollup-plugin-babel';
export default [{
watch: {
clearScreen: false
},
input: 'src/main.ts',
output: {
file: 'plugin-dist/cms-plugin.bundle.js',
format: 'umd',
name: 'cms-plugin'
},
plugins: [
copy({
targets: [
{ src: 'src/app/plugin-module/assets', dest: 'plugin-dist' },
{ src: ['src/app/plugin-module/styles'], dest: 'plugin-dist' }
]
}),
nodeResolve({ jsnext: true, module: true }),
angular(),
resolve({
jsnext: true,
main: true,
browser: true,
// pass custom options to the resolve plugin
customResolveOptions: {
moduleDirectory: 'node_modules'
}
}),
commonjs({
include: 'node_modules/**',
namedExports: {
'node_modules/primeng/primeng.js': ['ButtonModule', 'DropdownModule', 'MultiSelectModule','CalendarModule'
, 'ConfirmDialogModule', 'ConfirmationService'],
'node_modules/ngx-pagination/dist/ngx-pagination.js': ['NgxPaginationModule'],
'node_modules/ngx-pagination/dist/paginate.pipe': ['PaginatePipe'],
'node_modules/primeng/table.js': ['TableModule', 'Table'],
'node_modules/primeng/api.js': ['ConfirmationService', 'SelectItem'],
'node_modules/primeng/fullcalendar.js': ['FullCalendarModule']
}
}),
typescript({
typescript: require('typescript'),
objectHashIgnoreUnknownHack: true,
useTsconfigDeclarationDir: true,
})
],
external: [
'@angular/core',
'@angular/common',
'@angular/rxjs',
'@angular/rxjs-compat',
'@angular/rxjs/operators',
]
}]

---

插件应用程序模块

//import { FullCalendarModule } from 'primeng/fullcalendar'; // this make issue
//import { BsModalService, PositioningService, ModalModule } from "ngx-bootstrap";// this make issue
//Localization configurations
let l10nConfig: L10nConfig = {
locale: {
languages: [],
storage: StorageStrategy.Cookie
},
translation: {}
};
@NgModule({
imports: [
TranslationModule.forRoot(l10nConfig),
CommonModule,
FormsModule,
BrowserModule,
ConfirmDialogModule,
HttpClientModule,
HttpModule,
NgxPaginationModule,
BrowserAnimationsModule,
SimpleNotificationsModule.forRoot(),
AppRoutingModule,
CalendarModule,
MultiSelectModule,
NgSelectModule,
TableModule,
DropdownModule,
ButtonModule,
//FullCalendarModule,
//ModalModule.forRoot(),
],
declarations: [
TahalufValidatorComponent,
AppComponent,
ListCommitteeComponent,
ViewCommitteeComponent,
CommitteeComponent,
MomComponent,
ManageMeetingAgenda,
//MeetingComponent,
AddRowDirective,
CommitteeWorkPlanComponent,
ViewMeetingTaskComponent,
MeetingTaskComponent,
OnlyNumbersDirective,
NofityAlertComponent,
RegExpValidatorComponent,
EqualValidatorDirective,
MeetingComponent,
AddMeetingComponent,
EditMeetingComponent,
],
entryComponents: [
ListCommitteeComponent,
ViewCommitteeComponent,
CommitteeComponent,
MomComponent,
ManageMeetingAgenda,
CommitteeWorkPlanComponent,
ViewMeetingTaskComponent,
MeetingTaskComponent,
MeetingComponent,
AddMeetingComponent,
EditMeetingComponent,
],
providers: [
AuthenticationService,
LauncherGuard,
NotificationsService,
CMSApiHelperService,
GeneralService,
NotifyService,
TranslationService,
MeetingAttendeService,
ConfirmationService,
MeetingService,
MeetingTaskService,
MeetingSuggestionService,
MeetingAgendaSubjectsService,
CommitteeWorkPlanService,
CommitteeMemberService,
ParticipatingOrganizationalUnitService,
UserService,
//BsModalService,
//{
//    provide: 'plugins',
//    useValue: [{
//        name: 'app-metteing',
//        component: MeetingComponent
//    }],
//    multi: true
//}
],
bootstrap: [AppComponent]
})
export class AppModule {
constructor(public locale: LocaleService, private l10nLoader: L10nLoader, @Inject(L10N_CONFIG) private configuration: L10nConfigRef) {
}
}

---

这就是我在主应用中呈现插件的方式

import { AfterViewInit, Compiler, Component, ElementRef, EmbeddedViewRef, Inject, Injector, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { L10nConfigRef, L10N_CONFIG, TranslationService } from 'angular-l10n';
import { PageContainer } from "app/classes/page-container";
import { WFPage } from "app/classes/wf-page";
import { LauncherPageService } from "app/services/launcher-services/launcher-page.service";
import { environment } from '../../../environments/environment';

declare const SystemJS: any;
//SystemJS.config({
//  map: {
//    'plugin-babel': 'assets/plugins/systemjs-plugin-babel/plugin-babel.js',
//    'systemjs-babel-build': 'assets/plugins/systemjs-plugin-babel/systemjs-babel-browser.js'
//  },
//  transpiler: 'plugin-babel'
//});
@Component({
selector: 'app-page-viewer',
templateUrl: './page-viewer.component.html',
styleUrls: ['./page-viewer.component.css']
})
export class PageViewerComponent implements OnInit,AfterViewInit  {
@ViewChild('content') content: ElementRef;

constructor(
private launcherPageService: LauncherPageService,
private route: ActivatedRoute,
private router: Router,
private translation:TranslationService,
@Inject(L10N_CONFIG) private configuration: L10nConfigRef,
private _compiler: Compiler,
private _injector: Injector, private elementRef: ElementRef,private viewContainerRef: ViewContainerRef) {
} 
htmlDetails: string;
page: WFPage;
ngOnInit() {
this.route.params.subscribe((params: Params) => {
let urlCode = params["urlCode"];
this.content.nativeElement.innerHTML  = '';
this.launcherPageService.getByUrlCode(urlCode).subscribe((page: WFPage) => {
if (page) {
this.page = page; 
this.content.nativeElement.innerHTML=page.pageLayout.htmlDetails;
this.loadPlugins(page);
}
});
});
}
ngAfterViewInit() {    
} 
private async loadPlugins(page: WFPage) {
let modelMap = {}; 
for (var i = 0; i < page.pageContainerList.length;i++)   {
let pageContainer:PageContainer= page.pageContainerList[i];
var module = null; 
if (!modelMap[pageContainer.pluginComponent.plugin.id]) {
module = await SystemJS.import(pageContainer.pluginComponent.plugin.path);
modelMap[pageContainer.pluginComponent.plugin.id] = module;
} else {
module = modelMap[pageContainer.pluginComponent.plugin.id];
}
// compile module
const moduleFactory = await this._compiler
.compileModuleAsync<any>(module[pageContainer.pluginComponent.plugin.moduleName]);
// resolve component factory
const moduleRef = moduleFactory.create(this._injector);
moduleRef.instance.setLanguage(this.configuration.locale.languages, this.configuration.translation.translationData, 'ar-launcher');
this.translation.translationChanged().subscribe(
lang => moduleRef.instance.changeLanguage(lang)
);
if (moduleRef.instance.router && page.overrideRouter) {
moduleRef.instance.router = this.router;
}
if (moduleRef.instance.environment) {
moduleRef.instance.environment.serviceUrl = environment.pluginUrl;
}
//get the custom made provider name 'plugins' 
const componentProvider = moduleRef.injector.get('plugins');
if (componentProvider && componentProvider.length > 0) {
//from plugins array load the component on position 0
const componentFactory = moduleRef.componentFactoryResolver
.resolveComponentFactory<any>(componentProvider.find(c => c[0].name == pageContainer.pluginComponent.key)[0].component);
// compile component 
var pluginComponent = this.viewContainerRef.createComponent(componentFactory);
// pluginComponent.instance.router.config = pluginComponent.instance.router.config.concat(this.router.config);
//this.router.config = this.router.config.concat(pluginComponent.instance.router.config);
if (pluginComponent.instance.router && page.overrideRouter) {
pluginComponent.instance.router = this.router;
}
pluginComponent.instance.route = this.route;
//load component plugin into container layout
let elm = this.elementRef.nativeElement.querySelectorAll("." + pageContainer.containerKey); 
elm[0].appendChild((pluginComponent.hostView as EmbeddedViewRef<any>).rootNodes[0]);
////sending @Input() values 
//accessing the component template view
//(pluginComponent.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
}
}
}
}

很抱歉细节太多，但要说清楚。顺便说一句，我试着在两个应用程序中都使用babel，但没有任何改变。

感谢

Answer 1

当我将SystemJS升级到v6 时，它对我有效