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.
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.
<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.
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
Now build your angular project using ng build --prod. This will create all the required deployment files (build files) in the dist folder.
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.