Spring boot run Angular2

Question

I have an app with REST as Spring Boot Application and client as Angular2.

Earlier, I started apps separately - Spring Boot by starting SpringBootApplication main method (it started to listen on port 8080), Angular2 - running from command line npm start (it usually started on 3000 port).

Now I want Maven to run both apps with one command.

1. Angular 4.0.0
2. Spring Boot 1.5.4.RELEASE

I've been trying to apply answer and this tutorial. But in first case starts only Angular app, is second - only REST.

My package.json:

"scripts": {
    "build": "tsc -p src/",
    "build:watch": "tsc -p src/ -w",
    "serve": "lite-server -c=bs-config.json",
    "prestart": "npm run build",
    "start": "concurrently \"npm run build:watch\" \"npm run serve --proxy-config proxy-config.json\" ",
    "lint": "tslint ./src/**/*.ts -t verbose"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/forms": "~4.0.0",
    "@angular/http": "~4.0.0",
    "@angular/material": "^2.0.0-beta.7",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.26",
    "angular-in-memory-web-api": "~0.3.0",
    "angular2-modal": "^3.0.1",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "jsplumb": "^2.4.3",
    "ng2-bs3-modal": "^0.10.4",
    "ng2-popup": "^0.4.0",
    "rxjs": "5.0.1",
    "systemjs": "0.19.40",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "concurrently": "^3.2.0",
    "lite-server": "^2.2.2",
    "typescript": "~2.1.0",
    "canonical-path": "0.0.2",
    "tslint": "^3.15.1",
    "rimraf": "^2.5.4",
    "@types/node": "^6.0.46"
  },
  "repository": {}

Answer 1

I agree with sinedsem that for dev I would keep the two apps separate. As for managing a production build, I would do things slightly differently. I don't like the idea of having any manual steps involved in the build such as copying the build files from angular to the source of the spring boot app.

Instead, I would manage the whole build under maven with the angular UI and spring boot app built as separate modules. The build would be managed completely by maven, delegating the angular UI build to npm/gulp etc using frontend-maven-plugin. This can either be added as a dependency to the spring boot app of the output of the build can be copied to the target directory of the spring boot module.

Parent POM

Create a new Parent POM

<project xmlns="http://maven.apache.org/POM/4.0.0"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<groupId>org.example.angularboot</groupId>
<artifactId>boot-ui-parent</artifactId>
<version>0.1</version>
<packaging>pom</packaging>

<modules>
    <module>spring-boot-app</module>
    <module>angular-ui-resources</module>
</modules>

Angular UI Module

Build the Angular UI Module using frontend-maven-plugin to execute any npm/bower/gulp etc build steps. Either set the output of your build to target/classes/static or copy the built angular resources to target/classes/static

e.g. The below plugin installs node/npm and runs the required npm bower and gulp steps to build the Angular app.

<plugin>
                    <groupId>com.github.eirslett</groupId>
                    <artifactId>frontend-maven-plugin</artifactId>
                    <version>1.3</version>
                    <executions>
                        <execution>
                            <id>install node and npm</id>
                            <goals>
                                <goal>install-node-and-npm</goal>
                            </goals>
                            <phase>generate-resources</phase>
                            <configuration>
                                <nodeVersion>v6.10.3</nodeVersion>
                                <npmVersion>4.6.1</npmVersion>
                            </configuration>
                        </execution>
                        <execution>
                            <id>npm install</id>
                            <goals>
                                <goal>npm</goal>
                            </goals>
                            <phase>generate-resources</phase>
                        </execution>
                        <execution>
                            <id>bower install</id>
                            <goals>
                                <goal>bower</goal>
                            </goals>
                            <configuration>
                                <arguments>install --allow-root</arguments>
                            </configuration>
                        </execution>
                        <execution>
                            <id>gulp build</id>
                            <goals>
                                <goal>gulp</goal>
                            </goals>
                            <phase>generate-resources</phase>
                        </execution>
                    </executions>
                </plugin>

Spring Boop App module

This should be the same as the current spring boot module with the addition of the new parent and the dependency for the angular-ui module.

As the built version of the angular UI was packaged under target/classes/static and the angular-ui jar is on the classpath of spring boot, the angular-ui gets packaged into the spring boot application.

Alternatively, you can run the copy resources maven plugin to copy the resources from the build directory of the angular-ui module to the build directory of the spring-boot module. though I don't really like copying resource files from one module to another e.g.

<plugin>
<artifactId>maven-resources-plugin</artifactId>
<version>3.0.1</version>
<executions>
    <execution>
        <id>copy-angular-components</id>
        <phase>process-classes</phase>
        <goals>
            <goal>copy-resources</goal>
        </goals>
        <configuration>
            <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
            <resources>
                <resource>
                    <directory>${basedir}/../angular-ui/target/classes/static</directory>
                    <filtering>false</filtering>
                </resource>
            </resources>
        </configuration>
    </execution>
</executions>

Answer 2

Your package.json is used by npm, which is not the essential tool here.

I recommend you:

• For development keep running two apps separately.
• For production:
  • Pack your angular application in bundle. For example, using webpack.
  • Put your bundle to to spring boot project under /src/main/resources/static.
  • Run Spring Boot application, which will serve your Angular app from static resources.