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…
-> Eclipse marketplace will appear:
Go to link: https://marketplace.eclipse.org/content/angular-ide
Then drag and drop Install button to your running Eclipse workspace:
– Angular features panel will appear, we select all. Then press Confirm button. Got Review Licenses window:
Press Finish.
-> Installing Software will process … Then restart Eclipse,
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:
Fill project’s info as below image:
Press Next,
Then press Finish, an Angular 4 project is created:
Use ng -v to check 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:
– Make a request: http://localhost:4200/
=> Done! Now, It’s ready for development Angular Apps on SpringToolSuite :).
Last updated on August 23, 2017.
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
Hi,
The tutorial will help you more:
How to integrate Angular 4 with SpringBoot RestApi using SpringToolSuite
Regards,