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

Question

I followed this tutorial https://itnext.io/how-to-build-a-plugin-extensible-application-architecture-in-angular5-736890278f3f to install plugins to my angular application, what I want its a component in my angular app which execute and show an external component.

The problem is that I got an error:

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

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

a part of 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;
  }
}

Someone can help me to fix the error or give me another solution / tutorial to use plugins in angular 8?

Answer 1

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

and the import:

import * as systemjs from 'systemjs';

Answer 2

Instead of

declare const SystemJS: any;

can you try using:

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