无法动态转译 ES 模块需要通过 SystemJS.config 配置加载器插件

Question

我正在尝试构建可插入应用程序，一切正常，直到我导入 "ngx-bootstrap" 和 "FullCalendarModule"/primeng 在插件应用程序中。当我导入任何这些模块时，出现此错误。

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 时它与我一起工作

无法动态转译 ES 模块需要通过 SystemJS.config 配置加载器插件

Unable to dynamically transpile ES module A loader plugin needs to be configured via SystemJS.config

javascript

angular

typescript

plugins

rollup

无法动态转译 ES 模块 需要通过 SystemJS.config 配置加载器插件

Unable to dynamically transpile ES module A loader plugin needs to be configured via SystemJS.config

javascript

angular

typescript

plugins

rollup

无法动态转译 ES 模块需要通过 SystemJS.config 配置加载器插件