Using angular2 in a Spring webapp WITHOUT node.js

Question

I just made the move from Angular 1 to 2, and now I am going to create a spring mvc maven webapp with angular2 for the front-end side of it.

But everywhere on the internet I see people using node.js for the necessary libraries & plugins. Is there a way I can just use maven dependencies for this?

App structure:

_ main
   _ java
   _ resources
   _ webapp
       _ components
            _ app.component.ts
       _ img
       _ WEB-INF
       _ index.html
       _ main.ts

main.ts

//getting an error on the bootstrap import 
//because the angular2 folders aren't there because there is no node
import {bootstrap} from 'angular2/platform/browser'

import {AppComponent} from './components/app.component.ts'

bootstrap(AppComponent);

If you want to manage front-end dependencies with Maven, you should check WebJars project. Also there are ways how to invoke Node based tools (such as NPM, Bower or JSPM) from Maven - check maven-frontend-plugin (this is what I would prefer). — Pavel Horal
– Pavel Horal, Commented Feb 17, 2016 at 13:46

Adrien BARRAL · Accepted Answer · 2016-12-08 07:06:31Z

3

I personaly use Angular2 with a backend in Java, the whole packaged in a .war file.

Backend libraries are managed with Maven, and front end with NPM. My project structure is like this :

_ backend
  _ src
    _ main
      _ java
      _resources
_ frontend
  <angular-cli project>
  _ package.json ...

Note that NPM manage all my front dependencies, for now, I don't bundle anything because my application run in debug for now.

I have a deployement script wich copy the bundled version of my frontend in resources/static (or webapp) folder of the backend.

If you want some help to manage your webapp folder for Angular2, you can try AngularCLI. The project is at a very early stage, but you can do some interesting thing with it, and it will help you to create the boilerplate, it will download for you all the dependencies.

edited Dec 8, 2016 at 7:06

answered Feb 17, 2016 at 13:29

Adrien BARRAL

3,6041 gold badge27 silver badges37 bronze badges

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

4 Comments

Zoef Over a year ago

thx, gonna use npm then, thought there would be another way :) but it's fine

Adrien BARRAL Over a year ago

Maybe there is another way, but I don't know him. If your project is quite simple, AngularCLI, is a very good tool. For now there is still some bug when you have a complex project.

Androidicus Over a year ago

@AdrienBARRAL Hi Adrien, I'm in a similar situation (spring, Angular2 to .war) and I was wondering if there's a way to automatically detect changes and reload them in the browser? Do you have a sample project by any chance? Thanks

Adrien BARRAL Over a year ago

Hi, @Androidicus. When I am in a developping phase I use live-server, or the HTTP server embedded in Angular-cli. In a developping phase, this is not my backend which serve my application.

Collectives™ on Stack Overflow

Using angular2 in a Spring webapp WITHOUT node.js

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related