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.

Contents

I. Technologies
II. Practice
- - 1. Install Angular IDE for STS
  - 2. Create Angular project

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: https://marketplace.eclipse.org/content/angular-ide

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:

export class AppComponent {
  title = 'JavaSampleApproach - Angular APP Works!';
}

export class AppComponent {

title = 'JavaSampleApproach - Angular APP Works!';

}

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

h1 {
  color: blue;
  font-size: 150%;
}

h1 {

color: blue;

font-size: 150%;

}

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 :).

By grokonez | May 19, 2017.

Last updated on August 23, 2017.

Post Tags

2 thoughts on “How to setup Angular IDE with Spring Tool Suite”

PRADEEP KUMAR CHOUDHARY says:

September 10, 2017 at 6:06 am

Hi ,
I am getting this error while creating angular project in eclipse.
Node.js version: v8.4.0
NPM version: 5.4.1
npm install @angular/cli@1.1.0

> node-sass@4.5.3 install E:\STS_3.7_WS-AngularJs_02\one\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.5.3/win32-x64-57_binding.node
Download complete .] – :
Binary saved to E:\STS_3.7_WS-AngularJs_02\one\node_modules\node-sass\vendor\win32-x64-57\binding.node
Caching binary to C:\Users\Pradeep\AppData\Roaming\npm-cache\node-sass\4.5.3\win32-x64-57_binding.node

> node-sass@4.5.3 postinstall E:\STS_3.7_WS-AngularJs_02\one\node_modules\node-sass
> node scripts/build.js

Binary found at E:\STS_3.7_WS-AngularJs_02\one\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine
npm WARN saveError ENOENT: no such file or directory, open ‘E:\STS_3.7_WS-AngularJs_02\one\package.json’
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open ‘E:\STS_3.7_WS-AngularJs_02\one\package.json’
npm WARN one No description
npm WARN one No repository field.
npm WARN one No README data
npm WARN one No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”win
32″,”arch”:”x64″})

+ @angular/cli@1.1.0
added 852 packages in 101.135s
Node.js version: v8.4.0
NPM version: 5.4.1
npm install –save-dev angular-ide

> angular-ide@0.9.31 postinstall E:\STS_3.7_WS-AngularJs_02\one\node_modules\angular-ide
> node ./scripts/post.js

npm ERR! path E:\STS_3.7_WS-AngularJs_02\one\node_modules\fsevents\node_modules\ansi-regex\package.json
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall unlink
npm ERR! Error: EPERM: operation not permitted, unlink ‘E:\STS_3.7_WS-AngularJs_02\one\node_modules\fsevents\node_modules\ansi-regex\package.js
on’
npm ERR! { Error: EPERM: operation not permitted, unlink ‘E:\STS_3.7_WS-AngularJs_02\one\node_modules\fsevents\node_modules\ansi-regex\package
.json’
npm ERR! stack: ‘Error: EPERM: operation not permitted, unlink \’E:\\STS_3.7_WS-AngularJs_02\\one\\node_modules\\fsevents\\node_modules\\ansi
-regex\\package.json\”,
npm ERR! errno: -4048,
npm ERR! code: ‘EPERM’,
npm ERR! syscall: ‘unlink’,
npm ERR! path: ‘E:\\STS_3.7_WS-AngularJs_02\\one\\node_modules\\fsevents\\node_modules\\ansi-regex\\package.json’ }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Pradeep\AppData\Roaming\npm-cache\_logs\2017-09-10T06_01_37_123Z-debug.log

Reply
1. JavaSampleApproach says:
  
  September 10, 2017 at 6:51 am
  
  Hi,
  
  The tutorial will help you more:
  
  How to integrate Angular 4 with SpringBoot RestApi using SpringToolSuite
  
  Regards,
  
  Reply