Installing Angular Application

[Gordon Brown]

Currently we are using the JS1 diagram control in a Web Forms applicaion which was based on the Syncfusion Diagram Builder sample. We are interested in moving to JS2, but the Diagram Builder application exists only in angular. We are trying to install the angular application but are running into some issues probably because I am a newbie in angular.

I am starting with clean install because we are not using angular. I have installed the latest version of npm and version 5 of angular because it looks like that is the version used in the sample. See attached ng version to see what I have installed.

Also it isn't clear to me which directory I should be working from. I am assuming EJ2-SHOWCASE-ANGULAR-DIAGRAMBUILDER-MASTER because that is where the README.md file is.

Attachment: ng_version_f8d76492.zip

[Ramya Thirugnanam]

Hi Gordon, 

 

Please find the diagram builder sample from the below link and refer to the readme.txt file instructions. 

 

Link: https://github.com/syncfusion/ej2-showcase-angular-diagrambuilder 

 

 

Regards, 

Ramya T 

[Gordon Brown]

Ramya:

Thanks. I am getting the message below when I enter the ng server command. 

The serve command requires to be run in an Angular project, but a project definition cannot be found.

See my previous post for my thoughts on the matter.

Thanks,

Gord

[Ramya Thirugnanam]

Hi Gordon,  

 

Please try to use npm run ng serve in cmd prompt to run the diagram builder.  

 

Could you please provide version of nodeJS, npm, Angular CLI If still the issue persist? 

 

 

Note: Please open cmd prompt with diagram builder application location. 

 

Regards, 

Ramya T  

[Gordon Brown]

Didn't help just got different error.  See attached with version info for npm and angular.

Thanks

Gord

Attachment: Error_Info_3616d9aa.zip

[Ramya Thirugnanam]

Hi Gordon, 

 

Please use ng serve (not a server) command to compile and run the application. Please refer to the below screenshot.  

 

 

 

 

 

Regards, 

Ramya T 

[Gordon Brown]

Sorry about that, my bad. This still isn't working though. It looks to me like you are running with "ng serve" on your system. I tried "ng serve" and "npm run ng serve" neither worked.  Just looking at the npm documentation it looks to me like npm run command is trying to run a script called "ng" which it isn't finding.  I've include a screen shot of angular and npm versions which I suspect is the issue.

Attachment: ng_serve_5f4d925c.zip

[Ramya Thirugnanam]

Hi Gordon,  

 

Please try with the below forum link to make ng serve work. 

 

Link: https://stackoverflow.com/questions/52607924/have-a-new-project-but-when-ng-serve-i-get-error 

 

We will ensure with the latest version of NodeJS and NPM if still the issue with ng serve is reproduced. 

 

Regards, 

Ramya T  

[Gordon Brown]

Ramya:

Your distilled installation instructions in the readme.md file are as follows.

• npm install 
• npm i webpack-cli
• ng server

The first line installs dependant packages, the second installs angular and the third compiles and runs the application. 

The issue is that line two installs the current version of angular which is now version 7. Your application was created with version 5.6. If you replace line 2 with the below it now works.

• npm install -g webpack/cli@1.5.6

You may not need the -g as this does a global install, but in my case this is fine as this is the only angular app I am working with. Also it looks like you need to replace the  hyphen with a slash.

May I suggest you update your installation instructions so it works for the next person.

Thanks,

Gordon Brown

[Ramya Thirugnanam]

Hi Gordon,   

 

 

Thanks for your valuable suggestion. 

 

 

We will update the readme.txt file instruction. 

 

 

Regards, 

Ramya T 

[Gordon Brown]

Ramya:

I am still getting the same behaviour.

To test this I replace both javascript files in my application. My application only references ej.web.all.min.js which I assume references ej.diagram.min.js somehow. When I add a reference to ej.diagram.min.js I get an error in the console saying I am trying to register it twice.

Thanks,

Gordon Brown

[Ramya Thirugnanam]

Hi Gordon, 

 

Referring the ej.diagram.min.js and ej.web.all.min.js scripts are no more needed for EJ2 Diagram. Since, the both scripts will be loaded and referred automatically if you are using angular CLI. 

 

Note: The Ej1 is expected to refer the min files manually. 

 

Regards, 

Ramya T