How to setup Angular IDE with Spring Tool Suite

Angular 4 is available now! So developers need a support from Modern Web Editor. Angular IDE plugin is here! It allows us to code JavaScript and TypeScript in the Eclipse IDE, as well as use command-line tools.
So in the tutorial, JavaSampleApproach will show you how to setup Angular IDE and SpringToolSuite for full-stack developers.

Related articles:
How to integrate Angular 4 with SpringBoot Web App and SpringToolSuite

I. Technologies

– Angular 4
– SpringToolSuite: Version: 3.8.0.RELEASE

II. Practice

Step to do:
– Install Angular IDE for STS
– Create Angular project

1. Install Angular IDE for STS

– Go to Help -> Eclipse Marketplace…

Angular IDE - Eclipse Marketplace Client

-> Eclipse marketplace will appear:

Eclipse marketplace winzard

Go to link:

Then drag and drop Install button to your running Eclipse workspace:

drap drop install button.png

Angular features panel will appear, we select all. Then press Confirm button. Got Review Licenses window:

review licenses

Press Finish.
-> Installing Software will process … Then restart Eclipse,

done install - webeclipse

Now, Angular IDE plugin is successfully integrated with SpringTootSuite. Be ready for development!

2. Create Angular project

Choose File -> New -> Other, select: Angular Project, then press Next:

Springtoolsuite - create angular project

Fill project’s info as below image:

fille angular project info

Press Next,

create angular project - fill info - press next

Then press Finish, an Angular 4 project is created:

springtoolsuite angular2 create successfully

Use ng -v to check Angular version:

angular version

– Edit /angular-client/src/app/app.component.ts:

– Edit /angular-client/src/app/app.component.css:

At Angular CLI, right click on angular client project, then click Start Server:

start angular app

angular app start successfully

– Make a request: http://localhost:4200/

result app works

=> Done! Now, It’s ready for development Angular Apps on SpringToolSuite :).

Related Posts

Got Something To Say:

Your email address will not be published. Required fields are marked *