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.

Niharika · Accepted Answer · 2018-12-27 04:51:53Z

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!

CoderJammer · Accepted Answer · 2018-12-19 22:16:09Z

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

answered Dec 19, 2018 at 22:16

CoderJammer

7774 gold badges11 silver badges39 bronze badges

Comments

albogdano · Accepted Answer · 2018-12-19 22:21:46Z

2

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"));
    };
}

answered Dec 19, 2018 at 22:21

albogdano

2,9042 gold badges34 silver badges44 bronze badges

2 Comments

CoderJammer Over a year ago

Thank you for your response, I will try this solution as soon as possible. Usually I doesn't put the Angular code inside eclipse because it generate errors.. Anyway I will try.

CoderJammer Over a year ago

I don't understand if you mean to put all code inside my app folder or the dist content. Because if I put all the code, as expect, I have a lot of error inside node_modules folder. And then this way I will have 2 index.html, an index.html under webapp and another one under app (angular one)

isudarsan · Accepted Answer · 2018-12-27 06:08:21Z

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!

Did you set target/classes/static as your angular build output dir into angular.json?

Justin Albano · Accepted Answer · 2020-06-11 14:07:50Z

0

Put your dist content after angular build into Spring Boot Java project under src/main/resources/public and then launch your Spring Boot app.

edited Jun 11, 2020 at 14:07

Justin Albano

3,9792 gold badges26 silver badges53 bronze badges

answered Jun 11, 2020 at 13:02

Ranjan G

11

Comments

Vinod Sherikar · Accepted Answer · 2022-02-17 19:31:25Z

0

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

answered Feb 17, 2022 at 19:31

Vinod Sherikar

93 bronze badges

Collectives™ on Stack Overflow

How to Package Angular Project with SpringBoot application

6 Answers 6

Comments

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related