SystemJS 6.x 动态加载模块时设置/注册模块或提供映射 [英] SystemJS 6.x set/register modules or provide mapping when dynamically loading module

问题描述

我正在尝试在我的 Angular 8 应用程序中使用 systemjs 6.x 版动态加载模块.

I am trying to load modules dynamically with systemjs version 6.x in my Angular 8 application.

鉴于目前的文档，我可以使用 SystemJS API 以编程方式注册或设置模块.

Given there current documentation it looks like I can either user the SystemJS API to register or set a module programatically.

https://github.com/systemjs/systemjs/blob/master/docs/api.md#systemsetid-module---module

尝试这个，但它看起来不像 systemjs 正在寻找@angular/core

Trying this, however it doesn't look like systemjs is finding @angular/core

import * as angularCore from '@angular/core';
System.set('@angular/core', angularCore);

我应该使用 set 吗?或者注册这个?https://github.com/systemjs/systemjs/blob/master/docs/api.md#systemregisterdeps-declare

Should I be using set? Or register for this? https://github.com/systemjs/systemjs/blob/master/docs/api.md#systemregisterdeps-declare

看来我也可以提供导入图:

Looks like I can also provide an import map:

https://github.com/systemjs/systemjs/blob/master/docs/import-maps.md

我尝试在 index.html 中添加该映射，但没有任何运气

I tried adding that mapping in index.html without any luck

<script type="systemjs-importmap">
{
  "imports": {
    "@angular/core": "node_modules/@angular/core/bundles/core.umd.js"
  }
}
</script>

在使用 Angular CLI 时，systemjs 是否已经包含在我的 angular 构建中，这样我就可以注入我的 angular 应用程序已经在使用的 SystemJS，希望所有映射都已经为我的所有依赖项定义?

Is systemjs already included with my angular build when using Angular CLI in such a way that I can just inject the SystemJS that my angular application is already using in hopes that all mappings are already defined for all my dependencies?

推荐答案

我有一个可行的解决方案，基于 https://github.com/systemjs/systemjs/issues/2152#issuecomment-610470021

I have a working solution, based on the comments in https://github.com/systemjs/systemjs/issues/2152#issuecomment-610470021

我使用的是 SystemJS 6.6.1.

I am using SystemJS 6.6.1.

重要的事情之一是您要加载一个 umd 模块.因此，您需要在 angular.json 文件中添加 extras/amd.js 脚本:

One of the important things is that you want to load an umd module. Therefor you need to add the extras/amd.js script in your angular.json file:

"scripts": [
  "node_modules/systemjs/dist/system.js",
  "node_modules/systemjs/dist/extras/amd.js"
]

因此请务必将这两个脚本添加到您的 angular.json 文件中，然后您就可以使用以下代码:

So be sure to add these two scripts to your angular.json file and then you could use this code:

// tslint:disable-next-line:variable-name
const SystemJS = (window as any).System;

export class ModuleLoader {
  // based on https://github.com/systemjs/systemjs/issues/2152#issuecomment-610470021

  /**
   * Call this BEFORE calling load(url)
   */
  register(modules: { [name: string]: object }): Promise<this> {
    const imports: { [name: string]: string } = {};
    Object.keys(modules).forEach(key => {
      imports[key] = './lib/' + key;
    });
    const script = document.createElement('script');
    script.type = 'systemjs-importmap';
    script.textContent = JSON.stringify({imports}, null, 3);
    document.head.appendChild(script);
    return SystemJS.prepareImport().then(() => {
      const baseUrl = this.getBaseUrl();
      Object.keys(modules).forEach(key => {
        SystemJS.set(baseUrl + 'lib/' + key, modules[key]);
      });
      return this;
    });
  }

  load(url: string): Promise<any> {
    return SystemJS.import(url);
  }

  private getBaseUrl(): string {
    let baseUrl;
    const baseEl = document.querySelector('base[href]');
    if (baseEl) {
      baseUrl = (baseEl as any).href;
    }

    if (!baseUrl && typeof location !== 'undefined') {
      baseUrl = location.href.split('#')[0].split('?')[0];
      const lastSepIndex = baseUrl.lastIndexOf('/');
      if (lastSepIndex !== -1) {
        baseUrl = baseUrl.slice(0, lastSepIndex + 1);
      }
    }
    return baseUrl;
  }

}

您不需要在 index.html 中创建脚本标记.这由 ModuleLoader 处理.

You do not need to create a script tag in your index.html. This is handled by the ModuleLoader.

用法:

const libPath = 'https://path/to/angular/umd/library';

const loader = new ModuleLoader();

loader.register({
  '@angular/core': angularCore,
  '@angular/common': angularCommon,
  '@angular/common/http': angularCommonHttp,
  '@angular/forms': angularForms,
  '@angular/animations': angularAnimations,
  '@angular/platform-browser': angularPlatformBrowser,
  '@angular/platform-browser-dynamic': angularPlatformBrowserDynamic
}).then(() => {

  loader.load(libPath).then(async lib => {
    if (lib.default) {
      lib = lib.default;
    }
    ... do your stuff with the module
  });

});

这篇关于SystemJS 6.x 动态加载模块时设置/注册模块或提供映射的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！