时间戳

首页 > 解决方案 > 如何在 Angular 6+ 中实现 systemjs？

angular - 如何在 Angular 6+ 中实现 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

标签： angularangular6systemjs

解决方案

  1. 通过您的安装 SystemJS package.json（也许您需要安装旧版本以满足您的需要）。

  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-section

推荐阅读