Using DiagramComponent in AMD module system

[enova]

Hi,

We have system using React+TypeScript base on AMD system module. We would like to add your library ej2-react-diagrams to our application.

 

Question is it possible without migrating to SystemJS? Maybe some examples or suggestions?

[Naganathan Ganesh Babu]

Hi Klaudiusz, 

Thanks for contacting Syncfusion support. 

We suggest you to use below link to  Create React App project with TypeScript application. 

https://facebook.github.io/create-react-app/docs/adding-typescript 

While creating application, you can use “npx create-react-app my-app –typescript” query instead of “npm install -g create-react-app” to create react application in your end usual by using below our UG documentation link. 

https://ej2.syncfusion.com/react/documentation/diagram/getting-started/?no-cache=1 

Regards, 

Naganathan K G 

[enova]

Hi,

 

I will try to to give you a little more details :)

I have d.ts file where I store all my external definitions of types example:

 

/// <reference path="react/react-global.d.ts" />

/// <reference path="requirejs/require.d.ts" />

/// <reference path="classnames/classnames.d.ts" />

/// <reference path="underscore/underscore.d.ts" />

 

 

In this file I would like to add: 

/// <reference path="../../node_modules/@syncfusion/ej2-react-diagrams/index.d.ts" />

 

How ever build will fail with errors like this: 

Error               Build:Cannot find module './diagram'

Error               Build:Cannot find module './symbol-palette'

Error               Build:Cannot find module './overview'

Error               Build:Cannot find module '@syncfusion/ej2-react-base'

Error               Build:Cannot find module '@syncfusion/ej2-diagrams'        

[Shyam G]

Hi Enova, 

 

We have referred diagram node_modules in triple slash directives and an application works fine at our end. Could you please check in below sample? Still, if you face issues, please share us more details such as modify the below sample or share your sample. 

 

Screenshot: 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/F146223-1937808963 

 

Regards, 

Shyam G 

[enova]

Here you have a example of how our system works and how we attach external files in our project. Hope you will have some advice how to solve this problem.

Attachment: TestDiagram_fc244fd7.zip

[Shyam G]

Hi Enova, 

We found that ej2-react-diagrams package folder missing within node_modules folder when evaluating your sample. So only in the implementation, the file that was not found mistake happens. To install the package ej2-react-diagrams, use the command below. 

Command: 

npm install @syncfusion/ej2-react-diagrams –save 

 

help documentation: https://ej2.syncfusion.com/react/documentation/diagram/getting-started/?no-cache=1 

Regards, 

Shyam G 

[enova]

Folder is existing in node_modules: "node_modules\@syncfusion\ej2-react-diagrams"

[Shyam G]

Hi Enova, 

Sorry for the delay. 

On further analysis, the Syncfusion component could not be rendered by using typing file(reference path). We should render react Syncfusion component with the tags and it should be imported from Syncfusion package. Please refer to code example below. 

Code example: 

//import DiagramComponent 

import { DiagramComponent } from "@syncfusion/ej2-react-diagrams"; 

//render diagram  

<DiagramComponent id="diagram" width={"100%"} height={"700px"}/> 

Regards, 

Shyam G