Deploy WAR file on Tomcat of Spring boot and Angular App

Step 1: Create build for the Angular

From the shared project structure it seems like you have both backend and frontend code at the same locations. Ideal way is to create the build/artficates for the angular which creates the dist folder inside your angular dictornar which consists of your UI assets. To create the same you may hit the following commands based on your envorment and configurations

ng build --configuration=<env>
ng build --prod

Step 2: Intgrate UI with the Spring Boot

Then you may create the one folder names static within src/main/resources and paste the UI assets (files insides dist folder) inside this static folder.

Step 3: Deployment Configurations

Step 1: Change the packing option to war in pom.xml

<packaging>war</packaging>

Step 2: extends SpringBootServletInitializer

import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;

/**
 * This is a helper Java class that provides an alternative to creating a {@code web.xml}.
 * This will be invoked only when the application is deployed to a Servlet container like Tomcat, JBoss etc.
 */
public class ApplicationWebXml extends SpringBootServletInitializer {

    @Override
    protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {       
        return application.sources(ApplicationApp.class);
    }
}

Step 3: Create WAR file

mvn clean install 

And there we go! We can access the endpoints at

http://localhost:8080/context-path/endpoint OR
http://localhost:8080/war-filename/endpoint

We can also create the profile for war as below

<properties>
    <maven-war-plugin.version>3.2.3</maven-war-plugin.version>
</properties>

     <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
        <pluginManagement>
            <plugins>
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-war-plugin</artifactId>
                    <version>${maven-war-plugin.version}</version>
                    <executions>
                        <execution>
                            <goals>
                                <goal>war</goal>
                            </goals>
                            <phase>package</phase>
                        </execution>
                    </executions>
                    <configuration>
                        <warSourceIncludes>WEB-INF/**,META-INF/**</warSourceIncludes>
                        <failOnMissingWebXml>false</failOnMissingWebXml>
                        <warSourceDirectory>target/classes/static/</warSourceDirectory>
                        <webResources>
                            <resource>
                                <directory>src/main/webapp</directory>
                                <includes>
                                    <include>WEB-INF/**</include>
                                </includes>
                            </resource>
                        </webResources>
                    </configuration>
                </plugin>
            </plugins>
        </pluginManagement>
    </build>


    <profiles>
        <profile>
            <id>war</id>
            <build>
                <plugins>
                    <plugin>
                        <groupId>org.apache.maven.plugins</groupId>
                        <artifactId>maven-war-plugin</artifactId>
                    </plugin>
                </plugins>
            </build>
        </profile>
    </profiles>

---

Might be helpful

Deploy WAR to Tomcat (Spring Boot + Angular)

It is possible to bundle everything on one war, but I see it more convenient not to put different applications (backend war and frontend dist content) mixed together as one mess, where we both already are looking which part responds and where.

Easier, far more easier actually, is to apply the following config:

  <Host appBase="webapps"
          autoDeploy="false" name="localhost" unpackWARs="true"
          xmlNamespaceAware="false" xmlValidation="false">
         ...
          <Context docBase="/home/stuff" path="/static" />
    </Host>

where the Content tag is telling where front end lives. Frontend on angular, how shiny it may seem, is a static page for Tomcat like server. The backend, which is Java I suppose, surely needs actively a server and has to be served from war.

With the given docBase, dist content is copy-pasted manually to /home/stuff folder and it is shown at http://localhost:8080/static/ path. You should not need index.html after slash, but if you for some reason do need it, just add it. These values of file location and path are configurable freely as you like it. Also worth of mentioning that other parts of config just illustrate location in the config file.

The config file used is Tomcat's server.xml file.

The paths of backend app that get deployed can be seen at management console of Tomcat.

Sources:

[1] https://www.moreofless.co.uk/static-content-web-pages-images-tomcat-outside-war/

All the steps You did as Patel Romil said is right.Only mistake you are making is calling api at frontend. Don't add any context path in url as you added in application.properties.

If Your WAR file deployed on path wabITSpring then Your url will be like this in index.html

var cfgApiBaseUrl = "https://localhost:8080/wabITSpring/" 

Your app doesn’t care about the context path and won’t have any references to it. If your controller defines a path of /products then Tomcat will serve this up under /wabITSpring/products.

 var cfgApiBaseUrl = "https://localhost:8080/wabITSpring/products" 

Do this and your application will run successfully.