How to make a WAR file from angular 2 (angular-cli) project?

I wanted to post a complete answer to this question since there are lots of views to this question.

The answer works for all angular 2+ versions.

The procedure is as follows.

1. First you need to create a POM file in your project's root directory. Include the following code into the 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 http://maven.apache.org/POM/4.0.0 ">
        <modelVersion>4.0.0</modelVersion>
        <groupId>it.your-company</groupId>
        <artifactId>your-project-artifact-id</artifactId>
        <version>1.0.0</version>
        <name>your-project-name</name>
        <description>Any description</description>
        <packaging>war</packaging>

        <build>
            <finalName>target-file-name</finalName>
            <plugins>
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-war-plugin</artifactId>
                    <version>3.0.0</version>
                    <configuration>
              <warSourceDirectory>dist</warSourceDirectory>
                        <failOnMissingWebXml>false</failOnMissingWebXml>
                    </configuration>
                </plugin>
                <plugin>
                    <groupId>org.apache.tomcat.maven</groupId>
                    <artifactId>tomcat7-maven-plugin</artifactId>
                    <version>2.2</version>
                    <configuration>
                        <path>/${project.build.finalName}</path>
                        <update>true</update>
                        <url>http://localhost:8080/manager/text</url>
                        <username>tomcat</username>
                        <password>tomcat321</password>
                    </configuration>
                </plugin>
            </plugins>
        </build>
    </project>

Here, I have included the maven war plugin to build the war file as well as the maven tomcat plugin to run the war using IntelliJ idea.

2. Then you need to change the base URL of your index.html file as base href="/target-file-name". If you are running the war using maven tomcat plugin, the URL for your app would be http://localhost:8080/target-file-name

3. Now build your angular project using ng build --prod. This will create all the required deployment files (build files) in the dist folder.

4. Now run mvn clean package to package your build files to a war file. The war file will be created inside the target folder from your root directory of your project.

5. (Optional) You may also run the war file using maven tomcat plugin too.