How to Package Angular Project with SpringBoot application

Question

I have a SpringBoot Maven Project named Test inside my eclipse Workspace.

After that I create (with ng, following the Angular tour of heroes) an Angular client inside another folder on my system. Now if I launch with command line:

ng serve --open

inside my angular project folder and if I start my springboot server application I can run API GEt and others..

Temporarily I have manually added the content of dist folder obtained by the command

ng build

inside the src/main/resources/static folder that I have manually created in my SpringBoot project.

When I run by spring-boot:run and go to localhost:4200 it says connection refused, check your proxy or firewall

The goal would be package front end and back end to a single war runnable under tomcat.

Can you help me? Thank you all.

Answer 1

You can avoid the copying process by configuring the Angular CLI to take build directly in the src/main/resources/static folder. If you are using Angular 6 or above , you can change build output path in the angular.json file-

{
  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular.io-example": {
      "root": "",
      "projectType": "application",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "MODIFIED DIST PATH",
            ...

The modified dist path will be a relative path to your static folder.

If you are using Angular 5 or below, you can do the same in the .angular-cli.json file-

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "angular5-sample"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "MODIFIED DIST PATH",
      ...

Example- If your angular source code is in the src/main/webapp folder, then the modified dist path in the outputPath or outDir properties will be- '../resources/static/dist'.

This will create the dist folder directly in the src/main/resources/static folder. To tell SpringBoot that the index.html file is inside the src/main/resources/static/dist folder, you should update the static locations by adding the classpath of the dist folder in the application.properties file.

If you set the outputPath/outDir as '../resources/static' in the above example, then the build files will directly be generated in the src/main/resources/static folder. However, the Angular build process will delete the entire static folder and create a new static folder with the new build files each time you take an Angular build. You will lose any other files present in the static folder. So it is better to have a separate dist folder inside the static folder.

Hope this helps!

Answer 2

I find out a rough solution, but for now it's enough:

Create (everywere) an Angular Project by:

ng new angular-client

Build and deploy it by:

ng build --prod

put the content of dist file inside src/main/resources/static

maven clean install

spring-boot:run

An it works. Clearly the copying procedure should be automated maybe by maven

Answer 3

Here's an example directory layout for your project:

src
├── main
│   ├── java
│   │   └── com
│   │       └── domain
│   │           └── project
│   │               ├── Run.java
│   ├── resources
│   │   ├── banner.txt
│   └── webapp
│       ├── WEB-INF
│       ├── index.html
│       ├── app
│       │   ├── app.module.js
│       │   ├── app.utils.js

Instead of putting the Angular files inside src/main/resources/static , try creating a new web folder at src/main/webapp and inside it create a new app folder to store all the Angular code. This is also the default layout for web project in Maven.

In your pom.xml you can add this plugin:

<plugins>
    <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <configuration>
            <warSourceDirectory>src/main/webapp/</warSourceDirectory>
        </configuration>
    </plugin>
</plugins>

Also in your @SpringBootApplication class Run.java add this snippet so that all 404 requests are routed back to index.html so that they are handled by Angular:

@Bean
public ErrorPageRegistrar errorPageRegistrar() {
    return (ErrorPageRegistry epr) -> {
        epr.addErrorPages(new ErrorPage(HttpStatus.NOT_FOUND, "/index.html"));
    };
}

Answer 4

You can also use below maven plugin dependencies to pack your app. The project directory structure should look like something like this.

    <build>
   <plugins>
      <plugin>
         <groupId>org.apache.maven.plugins</groupId>
         <artifactId>maven-war-plugin</artifactId>
         <configuration>
            <failOnMissingWebXml>false</failOnMissingWebXml>
            <warSourceIncludes>WEB-INF/**,resources/public/build/**</warSourceIncludes>
            <packagingIncludes>WEB-INF/**,resources/public/build/**</packagingIncludes>
         </configuration>
      </plugin>
      <plugin>
         <groupId>com.github.eirslett</groupId>
         <artifactId>frontend-maven-plugin</artifactId>
         <version>1.6</version>
         <configuration>
            <!-- optional: where to download node from. Defaults to https://nodejs.org/dist/ -->
            <nodeDownloadRoot>http://nodejs.org/dist/</nodeDownloadRoot>
            <!-- optional: where to download npm from. Defaults to https://registry.npmjs.org/npm/-/ -->
            <npmDownloadRoot>http://registry.npmjs.org/npm/-/</npmDownloadRoot>
            <workingDirectory>src/main/webapp/resources/public</workingDirectory>
         </configuration>
         <executions>
            <execution>
               <id>install node and npm</id>
               <phase>process-classes</phase>
               <goals>
                  <goal>install-node-and-npm</goal>
               </goals>
               <configuration>
                  <!-- See https://nodejs.org/en/download/ for latest node and npm (lts) versions -->
                  <nodeVersion>v8.9.4</nodeVersion>
                  <npmVersion>5.6.0</npmVersion>
               </configuration>
            </execution>
            <execution>
               <id>npm config</id>
               <phase>process-classes</phase>
               <goals>
                  <goal>npm</goal>
               </goals>
               <!-- Optional configuration which provides for running any npm command -->
               <configuration>
                  <arguments>config set registry http://registry.npmjs.org/</arguments>
               </configuration>
            </execution>
            <execution>
               <id>npm install</id>
               <phase>process-classes</phase>
               <goals>
                  <goal>npm</goal>
               </goals>
               <!-- Optional configuration which provides for running any npm command -->
               <configuration>
                  <arguments>install</arguments>
               </configuration>
            </execution>
            <execution>
               <id>npm run build</id>
               <phase>process-classes</phase>
               <goals>
                  <goal>npm</goal>
               </goals>
               <configuration>
                  <workingDirectory>src/main/webapp/resources/public</workingDirectory>
                  <arguments>run build</arguments>
               </configuration>
            </execution>
         </executions>
      </plugin>
   </plugins>
</build>

By executing mvn clean install your app will be packed and can be executed with java & Angular components.

Hope this helps!

Answer 5

将 angular build 后的dist内容放入src/main/resources/public下的 Spring Boot Java 项目中，然后启动您的 Spring Boot 应用程序。

Answer 6

I have created dist folder in angular project and try to run that in spring boot app Getting white label page error and somehow resolved that by adding properties in application. Properties.

Now I am getting servlet error in my project.

Is there any configuration to run my angular app in spring boot project

Answer 7

Update spring boot application.properties with static resources property spring.web.resources.static-locations=classpath:/static/dist/app-ui

More details can be found here: https://docs.spring.io/spring-boot/docs/current/reference/html/application-properties.html#application-properties.web.spring.web.resources.static-locations