Как реализовать systemjs в Angular 6+?

Question

Я пытаюсь узнать, как заставить плагины работать в Angular, однако после добавления systemjs я получаю следующую ошибку:

Uncaught ReferenceError: SystemJS не определен

Я реализовал systemjs следующим образом:

import { System } from 'systemjs';
declare const SystemJS: System;

import * as angularCore from '@angular/core';
import * as angularCommon from '@angular/common';
import * as angularCommonHttp from '@angular/common/http';
import * as angularForms from '@angular/forms';
import * as angularAnimations from '@angular/animations';
import * as angularPlatformBrowser from '@angular/platform-browser';
import * as angularPlatformBrowserDynamic from '@angular/platform-browser-dynamic';

//error thrown here
SystemJS.set('@angular/core', SystemJS.newModule(angularCore));
SystemJS.set('@angular/common', SystemJS.newModule(angularCommon));
SystemJS.set('@angular/common/http', SystemJS.newModule(angularCommonHttp));
SystemJS.set('@angular/forms', SystemJS.newModule(angularForms));
SystemJS.set('@angular/animations', SystemJS.newModule(angularAnimations));
SystemJS.set('@angular/platform-browser', SystemJS.newModule(angularPlatformBrowser));
SystemJS.set('@angular/platform-browser-dynamic', SystemJS.newModule(angularPlatformBrowserDynamic));

SystemJS.config({ meta: { '*': { authorization: true } } });

Что мне не хватает?

Мой код, в котором я использую systemjs: https://github.com/FrisoDenijs/angular-pluggable-architecture/blob/master/dashboard/src/app/dashboard/dashboard/dashboard.component.ts

Мой коммит с попытками исправления:https://github.com/FrisoDenijs/pluggable-angular-example/commit/4472560da17b69c13809be931f6966d9254d10d1

В качестве примера я использую репо: https://github.com/paucls/angular-pluggable-architecture

Answer 1

1. Установите SystemJS через package.json (возможно, вам нужно установить более старую версию для ваших нужд).

2. Добавьте путь к файлу Javascript SystemJSна ваши скрипты внутри angular.json.Таким образом он загружается в глобальное пространство:

"scripts": [
  "node_modules/systemjs/dist/system.min.js"
]

Объявите и используйте его в своем файле.

...
declare const SystemJS: System;
...
SystemJS.set('@angular/core', SystemJS.newModule(angularCore));

Шаг 2 - это то, что вам не хватает (я думаю), а также почему он работает в репо, который вы связали;это делается так же: https://github.com/paucls/angular-pluggable-architecture/blob/master/dashboard/.angular-cli.json

То, что делает ваш код, на самом деле не импортирует сам модуль SystemJS, а только импортирует объявление типа, которое удаляется во время выполнения.Вот почему вам нужно добавить SystemJS в scripts -секцию