如何在Angular 6+中实现systemjs? [英] How do I implement systemjs in Angular 6+?

问题描述

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

I'm trying to learn how to make plugins work in Angular, however after adding systemjs I get the following error:

未捕获的ReferenceError:未定义SystemJS

Uncaught ReferenceError: SystemJS is not defined

我这样实现了systemjs:

I implemented systemjs like this:

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的代码:

My code where I use 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

My commit with attempted fixes: https://github.com/FrisoDenijs/pluggable-angular-example/commit/4472560da17b69c13809be931f6966d9254d10d1

我以回购为例: https://github.com/paucls/angular-可插拔架构

推荐答案

1. 通过您的 package.json 安装SystemJS(也许您需要根据需要安装旧版本).

1. Install SystemJS through your package.json (maybe you need to install an older version for your needs).

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

Add the path to the SystemJS Javascript File to your scripts inside angular.json. That way it is loaded into the global space:

"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

Step 2 is what you are missing (I guess) and also why it works in the repo you linked; it is done the same way: https://github.com/paucls/angular-pluggable-architecture/blob/master/dashboard/.angular-cli.json

您的代码在做什么实际上并没有导入SystemJS模块本身，而只是导入了类型声明，该声明在运行时被删除.这就是为什么您需要将SystemJS添加到 scripts -section

What your code is doing is not actually importing the SystemJS module itself, it's only importing the type declaration, which is stripped out at runtime. That's why you need to add SystemJS to the scripts-section

这篇关于如何在Angular 6+中实现systemjs?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！