11

I'm trying to use Angular2 with Springboot, but I can't set them together.

I first started a springboot project, and then tried to follow the Angular 2 Tour of Heroes by johnpapa and run npm install.

The structure looks like below:

Structure

I have the /app folder, and the .js are compiled to resources/static/app/js.

Problems:

1) The folder resources/static/node_modules/ has lots of files. So when running bootRun, it gets really slow and sometimes can't even refresh the files. I believe I shouldn't put the node_modules there, but not sure..

2) npm install puts the files in ./node_modules so currently I copied them to static folder. Should I just build the node_modules to static?

3) My structure looks hacky.. what is the best way to do it ?

How to set this structure? Also, please let me know if I should start using grunt/gulp or some other tool to make this easier.

Ps.: In case anyone is interested in the johnpapa's guide: johnpapa's angular2 guide

Improve this question
10
  • 1
    My understanding was that the whole Angular 2 app should go under src/main/resources/static or similar. Does your current approach actually work? Commented Jul 15, 2016 at 2:39
  • The way I did, it works if I copy the node_modules to static, but the bootRun gets really slow and doesn't refresh the static content if it changes. I wanted to avoid putting the whole Angular 2 app so it doesn't publish unnecessary resources, but maybe that's the way I should it as you suggested.. Commented Jul 15, 2016 at 2:52
  • I'm very interested in responses to your question, as I've been heading down this path too, but not yet fully implemented it. Commented Jul 15, 2016 at 2:53
  • Are you using hot swapping for your development code? Commented Jul 15, 2016 at 2:56
  • 1
    Consider separating the client code into a directory called "client". All client side goes into that directory. It is on the same level as "src". Then use your js build tool of choice to place a dist version within the src/main/resources/static Commented Jul 15, 2016 at 5:14

3 Answers 3

Reset to default
2

1) Remove node_modules from static folder. Your build process should bundle all the necessary modules. node_modules is used only during build.

2) Do not copy node_modules into static folder

3) Remove sources from static folder. That one is meant only for generated bundle + some static PROD files like index.html

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Makes sense.. I'll take some time to learn some js build process.. thanks!!
Just adding here in case anyone falls into the same problem.. There is a nice link here teaching all of that! :) blog.scottlogic.com/2015/12/24/creating-an-angular-2-build.html
1

Try really cool project builder Jhipster ;)

Improve this answer

Comments

-1

I shared on github a project that integrates Angular 2 with springboot. you can check here Angular 2 with spring boot

Improve this answer

1 Comment

Welcome to SO, you should really provide context to any links you provide in your answer so your answer can be used in standalone as if the link did not exist.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.