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](http://www.webjars.org/) project. Also there are ways how to invoke Node based tools (such as NPM, Bower or [JSPM](http://jspm.io/)) from Maven - check [maven-frontend-plugin](https://github.com/eirslett/frontend-maven-plugin) (this is what I would prefer). — Pavel Horal, Feb 17 '16 at 13:46

Adrien BARRAL · Accepted Answer · 2016-12-08T07:06:31.833

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 08 '16 at 07:06

answered Feb 17 '16 at 13:29

Adrien BARRAL

3,474
1
25
37

thx, gonna use npm then, thought there would be another way :) but it's fine – Zoef Feb 17 '16 at 14:21
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. – Adrien BARRAL Feb 17 '16 at 14:24
@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 – Androidicus Dec 07 '16 at 14:08
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. – Adrien BARRAL Dec 08 '16 at 07:02

Using angular2 in a Spring webapp WITHOUT node.js

1 Answers1