Dagre Angular2 SystemJS模块加载

Question

使用 Angular 2.4.0，tsc 2.3.1，我正在尝试将 Dagre 与 JointJS/graphlib 结合使用，以使用 SystemJS 作为加载器在 Angular2 中绘制图形。

http://www.daviddurman.com/automatic-graph-layout-with-jointjs-and-dagre.html

我不知道如何按照JointJS的要求在浏览器中获取'dagre'对象 var dagre = require('dagre');

我的 Angular2 组件包括 import * as dagre from 'dagre';

我的 SystemJS 配置：

(function () {
  System.config({
    map: {
        'dagre': '/static/libs/dagre/dagre.js'
    }
});
})();

无法加载 dagre 会导致 JointJS 在尝试调用 dagre.layout 时出现未定义的错误： Cannot read property 'layout' of undefined

// Executes the layout.
dagre.layout(glGraph, { debugTiming: !!opt.debugTiming });

这可能是库未自行导出的问题，还是我必须在我的 SystemJS 配置中指定格式？

Answer 1

所以我不确定到底是什么解决了这个问题，但我做了三件事：

1) npm install -D @types/dagre

2) import * as dagre from dagre; 在我的 component.ts

3) 添加格式：全局到 SystemJS 配置

(function () {
  System.config({
    map: {
        'lodash': '/static/libs/lodash/index.js',
        'dagre': '/static/libs/dagre/dagre.js',
        'graphlib': '/static/libs/graphlib/grpahlib.umd.js',
    },
    meta: {
      'dagre': {
         format: 'global',
         deps: ['lodash'],
      },
      'graphlib': {
         format: 'global',
         deps: ['lodash'],
      }
    }
});
})();

Dagre Angular2 SystemJS模块加载

Dagre Angular2 SystemJS module loading

systemjs

dagre

angular