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: 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!';
}

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

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

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

  1. 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

  2. Great post. I was checking constantly this blog and I am impressed! Extremely helpful info particularly the last part ūüôā I care for such information a lot. I was looking for this particular info for a long time. Thank you and best of luck.

  3. These days of austerity as well as relative stress and anxiety about incurring debt, most people balk resistant to the idea of employing a credit card in order to make acquisition of merchandise or even pay for a holiday, preferring, instead to rely on a tried and also trusted way of making payment – hard cash. However, if you have the cash there to make the purchase completely, then, paradoxically, this is the best time for them to use the cards for several reasons.

  4. Excellent blog here! Also your web site a lot up fast!
    What host are you the usage of? Can I get your associate link on your host?
    I wish my site loaded up as quickly as yours lol

Leave a Reply

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