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

63 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

  5. Hi! This post could not be written any better! Reading
    this post reminds me of my old room mate!
    He always kept chatting about this. I will forward this article to
    him. Fairly certain he will have a good read. Many thanks for sharing!

  6. Hey! Do you know if they make any plugins to assist with Search Engine Optimization? I’m trying
    to get my blog to rank for some targeted keywords but I’m not seeing very
    good gains. If you know of any please share. Appreciate it!

  7. Hi! Would you mind if I share your blog with my twitter group?
    There’s a lot of folks that I think would really enjoy your content.
    Please let me know. Many thanks

  8. Hello There. I discovered your weblog the use of msn. This
    is a really smartly written article. I’ll be sure
    to bookmark it and return to read extra of your useful
    info. Thank you for the post. I will definitely return.

  9. Great article! This is the kind of information that are supposed to be shared around the net.
    Disgrace on Google for no longer positioning this submit
    upper! Come on over and seek advice from my website . Thanks =)

  10. you’re actually a good webmaster. The web site loading velocity
    is amazing. It kind of feels that you’re doing any unique trick.

    Also, The contents are masterwork. you’ve done a fantastic
    activity in this subject!

  11. Great goods from you, man. I have understand your stuff previous to and you’re just too great.
    I actually like what you have acquired here, really like what you are stating
    and the way in which you say it. You make it entertaining and you
    still care for to keep it smart. I can not wait to read far more from you.
    This is really a tremendous site.

  12. I know this if off topic but I’m looking into starting my own weblog and
    was wondering what all is required to get set up? I’m assuming
    having a blog like yours would cost a pretty penny?
    I’m not very internet savvy so I’m not 100% positive.
    Any tips or advice would be greatly appreciated.

    Cheers

  13. Do you have a spam issue on this site; I also am a blogger, and I was wanting to
    know your situation; many of us have developed some nice procedures and we are looking to swap methods with others,
    please shoot me an e-mail if interested.

  14. Whoa! This blog looks just like my old one! It’s on a
    entirely different topic but it has pretty much the
    same layout and design. Great choice of colors!

  15. Hi there it’s me, I am also visiting this web site regularly, this web page is genuinely pleasant and
    the people are really sharing pleasant thoughts.

  16. Hey there, You’ve done a great job. I’ll certainly digg it and personally
    recommend to my friends. I am sure they’ll be benefited
    from this web site.

  17. wonderful post, very informative. I wonder why the opposite experts of this
    sector don’t understand this. You must continue your writing.

    I am sure, you’ve a huge readers’ base already!

  18. I’m amazed, I have to admit. Rarely do I come
    across a blog that’s both equally educative and engaging, and let me tell you, you’ve hit the nail on the head.

    The problem is an issue that too few folks are speaking intelligently
    about. I’m very happy I found this in my search for something relating to this.

  19. Link exchange is nothing else except it is just placing the other person’s weblog link on your page at proper
    place and other person will also do similar for you.

  20. Hi there, just became alert to your blog through Google, and found that it’s really informative.
    I’m going to watch out for brussels. I will be grateful if you continue this
    in future. Lots of people will be benefited from your writing.
    Cheers!

  21. Hey would you mind letting me know which webhost
    you’re working with? I’ve loaded your blog in 3 completely different browsers and I must say this blog loads a lot quicker then most.
    Can you recommend a good internet hosting provider at a fair price?
    Thank you, I appreciate it!

  22. An outstanding share! I’ve just forwarded this onto a co-worker who has
    been conducting a little research on this. And he in fact ordered me dinner simply
    because I found it for him… lol. So allow me to reword this….
    Thank YOU for the meal!! But yeah, thanks for spending some time to talk about this subject here on your web site.

  23. Thanks for the auspicious writeup. It in fact used to be a entertainment account it.
    Glance advanced to far delivered agreeable from you! By the way, how can we keep in touch?

  24. I have been surfing on-line greater than three hours today, yet
    I never discovered any fascinating article like yours. It’s pretty worth enough for me.
    In my opinion, if all webmasters and bloggers made just right content as
    you probably did, the internet will be a lot more useful than ever before.

  25. Youre so cool! I dont suppose Ive read something like this before. So nice to search out any individual with some unique thoughts on this subject. realy thank you for beginning this up. this website is one thing that is needed on the net, somebody with somewhat originality. helpful job for bringing something new to the internet!

  26. hey there and thank you for your information – I have definitely picked up anything new from right here.
    I did however expertise several technical points using this site, since I experienced to reload
    the site lots of times previous to I could get it to load properly.

    I had been wondering if your web host is OK? Not that I’m complaining,
    but sluggish loading instances times will often affect your placement
    in google and can damage your high-quality score if ads and
    marketing with Adwords. Well I am adding this RSS to my email
    and can look out for much more of your respective
    exciting content. Make sure you update this again soon.

  27. It’s really a great and useful piece of information. I’m satisfied that you
    simply shared this helpful info with us. Please keep us up to date like this.
    Thanks for sharing.

  28. Heya i am for the first time here. I came across this board
    and I find It truly useful & it helped me out a lot.
    I hope to give something back and help others like
    you aided me.

  29. Hello! Would you mind if I share your blog with my
    twitter group? There’s a lot of folks that I think would really appreciate your content.
    Please let me know. Cheers

  30. I am really impressed along with your writing skills and
    also with the layout on your blog. Is this a paid theme or did you customize
    it your self? Either way stay up the excellent quality writing,
    it is uncommon to peer a nice blog like this one today..

  31. Hi, I do think this is an excellent web site.
    I stumbledupon it 😉 I’m going to return once again since I book marked it.
    Money and freedom is the greatest way to change, may you be rich and continue to guide other people.

  32. What’s up everyone, it’s my first pay a quick
    visit at this web page, and paragraph is in fact fruitful in favor of me, keep up
    posting such articles or reviews.

  33. Aw, this was an incredibly nice post. Spending some time and actual
    effort to make a really good article… but what can I say… I put things
    off a lot and never manage to get nearly anything done.

Leave a Reply

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