Angular SystemJS 6.x设置/注册模块或在动态加载模块时提供映射

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

考虑到当前的文档，看起来我可以使用SystemJSAPI注册或通过编程设置模块

尝试这个，但是看起来systemjs并没有找到@angular/core

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

我应该使用set吗？或者注册这个？

看起来我还可以提供一个导入映射：

我尝试在index.html中添加该映射，但没有成功

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

{
“进口”：{
“@angular/core”：“node_modules/@angular/core/bundles/core.umd.js”
}
}

---

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

根据

我使用的是SystemJS 6.6.1

重要的一点是要加载umd模块。因此，您需要在angular.json文件中添加

extras/amd.js

脚本：

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

因此，请确保将这两个脚本添加到angular.json文件中，然后您可以使用以下代码：

// 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;
  }

}

---

根据中的评论，我有一个有效的解决方案

我使用的是SystemJS 6.6.1

重要的一点是要加载umd模块。因此，您需要在angular.json文件中添加

extras/amd.js

脚本：

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

因此，请确保将这两个脚本添加到angular.json文件中，然后您可以使用以下代码：

// 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;
  }

}