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:

– 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


2 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

Got Something To Say:

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

*