Spring boot run Angular2

I agree with sinedsem that for dev I would like both apps to be separate. as far as production build management goes, I would do it a little differently. I don't like the idea of ​​doing any manual build-related actions like copying build files from angular to the source of the spring boot app.

Instead, I could manage the whole build under maven with an angular ui and spring bootstrapping app built as separate modules. The construct will be entirely maven driven, delegating angular ui build to npm / gulp etc. using frontend-maven-plugin . This can be added as a dependency of the spring boot application, the build output 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

Create an angular UI module using the frontend-maven-plugin to do any npm / bower / gulp etc. build steps. Either customize your build output to target/classes/static

, or copy your angular built resources totarget/classes/static

eg. The following plugin installs node / npm and runs the necessary npm bower and gulp steps to create an 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 Application Module

It should be the same as the current spring boot module with a new parent and dependency for the angular-ui module added.

Since the inline version of the angular UI was packaged in target / classes / static and the angular-ui jar is in the spring boot classpath, the angular ui will be packaged in the spring boot app.

Alternatively you can run copy maven plugin resources to copy resources from angular-ui module build directory to create spring-boot module directory. although I don't really like copying resource files from one module to another for example

<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>