Hi,

is there anyone who managed to import the 'diagram-library' npm package into an Angular 2+ project?
I added diagram-library to package.json and saved the file which caused an automatic restorage of my npm packages in my node_modules folder.
The diagram-library folder contains some Javascript files (Common, Diagramming) and a typed file (t.ds).

I'd like to take advantage of that typings, that's why I am not including the JavaScript files by the HTML <script> tags.

What I did was the following:

Code (javascript):

import { MindFusion } from 'diagram-library'; import Diagram = MindFusion.Diagramming.Diagram; import DiagramLink = MindFusion.Diagramming.DiagramLink; import ShapeNode = MindFusion.Diagramming.ShapeNode; import Rect = MindFusion.Drawing.Rect; import LayeredLayout = MindFusion.Graphs.LayeredLayout;

The first line is throwing an error, saying:
Quote:

The file ".../jsdiag.t.ds" is not a module

.

I think the problem is that you are not exporting the declared namespace nor any classes?

But I don't know, as I'm pretty new to Angular and Typescript.

How can I solve the issue without losing the advantage of type safety on compile time and word suggestions?

Thanks in advance  :)

Hi,

Adding a reference path to the typed diagramming file should be enough to resolve the types in the library:

Code (java):

/// <reference path="node_modules/diagram-library/jsdiag.d.ts" /> import Diagram = MindFusion.Diagramming.Diagram; import DiagramLink = MindFusion.Diagramming.DiagramLink; import ShapeNode = MindFusion.Diagramming.ShapeNode; import Rect = MindFusion.Drawing.Rect; import LayeredLayout = MindFusion.Graphs.LayeredLayout;

Also, make sure that the MindFusion.Common.js and MindFusion.Diagramming.js scripts are referenced and loaded by the browser. If you're not using jquery, you should also set the MindFusionImpl StandAlone setting:

Code (html):

<script type="text/javascript">MindFusionImpl = "StandAlone"</script> <script src="node_modules/diagram-library/MindFusion.Common.js"></script> <script src="node_modules/diagram-library/MindFusion.Diagramming.js"></script>

Regards,
Lyubo

Hi,

thanks for your quick response. It seems to work now. Every npm package that I have installed yet, could be imported easily by the code shown in the starting post.

I am new in mind fusion, i want to use in Angular 2 , but i am getting below error.
The file ".../jsdiag.t.ds" is not a module

my code here:

import { MindFusion } from 'diagram-library';

import AnchorPattern = MindFusion.Diagramming.AnchorPattern;
import AnchorPoint = MindFusion.Diagramming.AnchorPoint;
import DiagramNode = MindFusion.Diagramming.DiagramNode;
import DiagramLink = MindFusion.Diagramming.DiagramLink;
import ShapeNode = MindFusion.Diagramming.ShapeNode;
import MarkStyle = MindFusion.Diagramming.MarkStyle;
import Style = MindFusion.Diagramming.Style;
import Theme = MindFusion.Diagramming.Theme;
import HandlesStyle = MindFusion.Diagramming.HandlesStyle;
import Events = MindFusion.Diagramming.Events;
import Diagram = MindFusion.Diagramming.Diagram;
import Shape = MindFusion.Diagramming.Shape;

Hi,

Did you try the solution, already provided in the thread above?

Regards,
Lyubo

Attached to this post is a minimal sample Angular application, that demonstrates how to add the diagram component.

Regards,
Lyubo

---