Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

not able to use with Angular 2 (Angular CLI)

See original GitHub issue

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?

Issue Analytics

State:
Created 6 years ago
Comments:7

Top GitHub Comments

1reaction

sguiheuxcommented, Jul 10, 2017

@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 😃

0reactions

Dmitracommented, Nov 23, 2019

works fine now, please close

Top Results From Across the Web

Angular 2 Setup with Angular-CLI - Stack Overflow

Solution to this problem is to Uninstall older version of Node.js from add/remove programs and install a fresh instance of latest Node.js. then ......

ng serve not working when install latest version of angular cli

I upgraded from a project using CLI beta.26 to 32.3, following directions here to upgrade the cli. At first running NG Serve produced...

CLI Overview and Command Reference - Angular

In your browser, open http://localhost:4200/ to see the new application run. When you use the ng serve command to build an application and...

48 answers on StackOverflow to the most popular Angular ...

map is not a function in [null]; How to use jQuery with Angular? Angular EXCEPTION: No ... 2.x, 4.x, 5.x (TypeScript) with Angular...

How To Install Angular CLI - KnowledgeHut

Now that you know what Angular CLI is, you could be wondering if you need to make use of it to be an...