We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Installing Angular Application

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

11 Replies

RT Ramya Thirugnanam Syncfusion Team November 14, 2018 11:28 AM UTC

Hi Gordon, 
 
Please find the diagram builder sample from the below link and refer to the readme.txt file instructions. 
 
 
 
Regards, 
Ramya T 



GB Gordon Brown November 14, 2018 09:55 PM UTC

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


RT Ramya Thirugnanam Syncfusion Team November 15, 2018 10:12 AM UTC

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  



GB Gordon Brown November 15, 2018 10:03 PM UTC

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

Thanks


Gord

Attachment: Error_Info_3616d9aa.zip


RT Ramya Thirugnanam Syncfusion Team November 16, 2018 04:56 AM UTC

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 



GB Gordon Brown November 16, 2018 08:23 PM UTC

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


RT Ramya Thirugnanam Syncfusion Team November 19, 2018 11:10 AM UTC

Hi Gordon,  
 
Please try with the below forum link to make ng serve work. 
 
 
We will ensure with the latest version of NodeJS and NPM if still the issue with ng serve is reproduced. 
 
Regards, 
Ramya T  



GB Gordon Brown November 19, 2018 04:45 PM UTC

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


RT Ramya Thirugnanam Syncfusion Team November 20, 2018 05:04 AM UTC

Hi Gordon,   
 
 
Thanks for your valuable suggestion. 
 
 
We will update the readme.txt file instruction. 
 
 
Regards, 
Ramya T 



GB Gordon Brown November 28, 2018 08:52 PM UTC

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


RT Ramya Thirugnanam Syncfusion Team November 29, 2018 06:22 AM UTC

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 


Loader.
Live Chat Icon For mobile
Up arrow icon