如何在Angular 6+中实现systemjs?

时间:2019-05-03 00:22:43

标签: angular angular6 systemjs

我正在尝试学习如何使插件在Angular中工作,但是在添加systemjs之后,出现以下错误:

  

未捕获的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

1 个答案:

答案 0 :(得分:1)

  1. 通过package.json安装SystemJS(也许您需要安装较旧的版本才能满足需要)。

  2. 将SystemJS Javascript文件的路径添加到angular.json中的脚本中。这样就可以将其加载到全局空间中:

"scripts": [
  "node_modules/systemjs/dist/system.min.js"
]
  1. 在文件中声明并使用它。
...
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部分

的原因