Angular 8中的插件：未捕获的ReferenceError：SystemJS

Question

我遵循了本教程https://itnext.io/how-to-build-a-plugin-extensible-application-architecture-in-angular5-736890278f3f的介绍，将插件安装到我的angular应用程序中，我希望它是我的angular应用程序中的一个组件，该组件执行并显示一个外部组件。

问题是我遇到了错误：

Uncaught ReferenceError: SystemJS is not defined
    at Module../src/main.ts (main.ts:13)
    at __webpack_require__ (bootstrap:78)
    at Object.0 (parent.service.ts:13)
    at __webpack_require__ (bootstrap:78)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.js:1

我的main.ts

declare const SystemJS: any;

import * as angularCore from '@angular/core';
import * as angularCommon from '@angular/common';
import * as angularForms from '@angular/forms';

SystemJS.set('@angular/core', SystemJS.newModule(angularCore));
SystemJS.set('@angular/common', SystemJS.newModule(angularCommon));
SystemJS.set('@angular/forms', SystemJS.newModule(angularForms));

angular.json的一部分

           "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "src/styles.css",
              "node_modules/font-awesome/css/font-awesome.css"

            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/popper.js/dist/umd/popper.js",
              "node_modules/bootstrap/dist/js/bootstrap.js",
              "node_modules/systemjs/dist/system.js"
            ]

我的app.component.ts

import {
  Component, Compiler, Injector, ViewChild,
  ViewContainerRef, AfterViewInit
} from '@angular/core';

declare const SystemJS: any;


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'angularExtensionv3';
  @ViewChild('content', {static: false}) content: ViewContainerRef;

  constructor(private _compiler: Compiler, private _injector: Injector) {
  }

  ngAfterViewInit() {
    this.loadPlugins();
  }

  private async loadPlugins() {
    // import external module bundle
    const module = await SystemJS.import('assets/plugins/plugin-a.bundle.js');

    // compile module
    const moduleFactory = await this._compiler
      .compileModuleAsync<any>(module['PluginAModule']);

    // resolve component factory
    const moduleRef = moduleFactory.create(this._injector);

    // get the custom made provider name 'plugins'
    const componentProvider = moduleRef.injector.get('plugins');

    // from plugins array load the component on position 0
    const componentFactory = moduleRef.componentFactoryResolver
      .resolveComponentFactory<any>(
        componentProvider[0][0].component
      );

    // compile component
    var pluginComponent = this.content.createComponent(componentFactory);

    // sending @Input() values
    // pluginComponent.instance.anyInput = "inputValue";

    // accessing the component template view
    // (pluginComponent.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
  }
}

有人可以帮助我解决错误或给我另一个解决方案/教程，以在angular 8中使用插件吗？

Answer 1

在您的angular.json中：

"scripts": [
          "./node_modules/jquery/dist/jquery.js",
          "./node_modules/popper.js/dist/umd/popper.js",
          "./node_modules/bootstrap/dist/js/bootstrap.js",
          "./node_modules/systemjs/dist/system.js"
        ]

和导入：

import * as systemjs from 'systemjs';

Answer 2

代替

declare const SystemJS: any;

您可以尝试使用：

const SystemJs: any = (window as any).System;