not able to use with Angular 2 (Angular CLI)

[ank5]

I want to use dagre-d3 in Angular2 project. The project has been created using Angular2 CLI.

I have installed dagre-d3 -

npm install dagre-d3 --save

then I installed dagre-d3 types

npm install @types/dagre-d3 --save

Now in the Angular2 component, I have done the following to test the integration with dagre-d3

import * as dagreD3 from 'dagre-d3';
ngOnInit() {
    var g = new dagreD3.graphlib.Graph();  
}

gives me the below error in browser console

graphlib.js:5 Uncaught Error: Cannot find module "."
    at webpackMissingModule (graphlib.js:5) [<root>]
    at Object.<anonymous> (graphlib.js:5) [<root>]
    at __webpack_require__ (bootstrap 547f0d2…:52) [<root>]
    at Object.<anonymous> (index.js:24) [<root>]
    at __webpack_require__ (bootstrap 547f0d2…:52) [<root>]
    at Object.169 (routes.ts:13) [<root>]
    at __webpack_require__ (bootstrap 547f0d2…:52) [<root>]
    at Object.166 (app.component.ts:8) [<root>]
    at __webpack_require__ (bootstrap 547f0d2…:52) [<root>]
    at Object.155 (src async:7) [<root>]
    at __webpack_require__ (bootstrap 547f0d2…:52) [<root>]
    at Object.377 (main.bundle.js:445) [<root>]
    at __webpack_require__ (bootstrap 547f0d2…:52) [<root>]
    at webpackJsonpCallback (bootstrap 547f0d2…:23) [<root>]

[WDS] Warnings while compiling.
client?ffdb:98 ./~/dagre-d3/lib/graphlib.js
5:4-11 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Do I need to install graphlib types in order to use dagre-d3 with angular2?

[JeremyBratzel]

Have you figured out a solution to this problem? Or another way to accomplish using dagre with angular? I have run into the same error and it's driving me up the wall.

[ank5]

No, couldn't find a solution. Since I am unable to use dagre-d3 anymore, looking for alternatives now.

On Tue, May 9, 2017 at 7:40 PM, popbottlepirate [email protected] wrote:

Have you figured out a solution to this problem? Or another way to accomplish using dagre with angular? I have run into the same error and it's driving me up the wall.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/cpettitt/dagre-d3/issues/278#issuecomment-300176557, or mute the thread https://github.com/notifications/unsubscribe-auth/AZq-ApE3mQ_K8WfJmw8AzQ0X3OhbE8L8ks5r4HPGgaJpZM4M3nqs .

[sguiheux]

It works for me. .angular-cli.json: "../node_modules/graphlib/dist/graphlib.js", "../node_modules/dagre/dist/dagre.js"

On my component: import * as d3 from 'd3'; import * as dagreD3 from 'dagre-d3';

[kaketsu]

@sguiheux what is you d3 version, do you using d3 v4, I can't solve it using your method

[sguiheux]

@kaketsu In fact I had to fork dagre-d3 to change 3 lib file: https://github.com/sguiheux/dagre-d3/commit/14439e1b5c80e8d7c67b0be339c3afca8c2160ca

Then add this in my package .json https://github.com/sguiheux/dagre-d3/tarball/reworkDependencies It will install d3 by itself.

For me 3.3.8

Project here: https://github.com/ovh/cds/tree/master/ui Package.json : https://github.com/ovh/cds/blob/master/ui/package.json .angular-cli.json: https://github.com/ovh/cds/blob/master/ui/.angular-cli.json Use here: https://github.com/ovh/cds/blob/master/ui/src/app/views/workflow/graph/workflow.graph.component.ts

If you find another way without using my fork, I want it :)

[trampi]

Forked it too, released the npm package dagre-d3-webpack. Should work as a drop-in replacement, as long as your update your require/imports.

[Dmitra]

works fine now, please close