Angular 8 中的插件:未捕获的引用错误:SystemJS

Question

我按照本教程 https://itnext.io/how-to-build-a-plugin-extensible-application-architecture-in-angular5-736890278f3f 将插件安装到我的角度应用程序中，我想要的是我的角度应用程序中执行并显示外部组件的组件。

问题是我收到一个错误：

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

我的主要内容

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"
            ]

My 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;