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

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.

Answer 1

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.
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.
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.
(Optional) You may also run the war file using maven tomcat plugin too.

Answer 2

If you want to deploy locally. Say specifically at localhost:8080(Tomcat) , go to the service.msc and start tomcat Services. Build your angular 2 /angular 4 using (ng build). Now open the angular project folder and copy the files inside the dist folder to a new folder say(webui). Open index.html page and give as . Copy this folder to "C:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps". Go to browser and type localhost:8080/webui.
This is how i deployed my angular 4 static content in tomcat.
Hope this helps you.

Answer 3

In your index.html set base href to "" or in your case (tomcat) to "webapps" that works for me