Question

使用Angular 2.4.0，tsc 2.3.1，我试图使用带有JointJS / graphlib的Dagre，使用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.layout时，无法加载dagre导致JointJS中出现未定义的错误： 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）{component}中的import * as dagre from dagre;

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模块加载

1 个答案: