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

Question

I want to make a war file to deploy the angular2 project in an apache tomcat server. I made a maven project and inserted the angular2 project inside it. Then I made the webapp folder(instead of the dist folder in the angular2 project) in the src/main in the maven project using angular-cli. When I run the apache server it shows the following errors.

Error loading http://localhost:8080/vendor/angularfire2/angularfire2.js as "angularfire2" from http://localhost:8080/app/app.module.js ; Zone: ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:8080/traceur(…) null

This looks like the troublesome dependency is the angularfire2. How to figure this our? Btw, I use angular2 rc-5.

Solution

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.

Comments

[Lonely]

I've solved this problem with an another angular2 seed by creating a gulp task that solving this issue: github.com/mgechev/angular2-seed/wiki/Deployment-as-WAR