如何从 angular 2 (angular-cli) 项目制作 WAR 文件？

Question

我想制作一个war文件来在apache tomcat服务器中部署angular2项目。我做了一个 Maven 项目并在其中插入了 angular2 项目。然后我使用angular-cli在maven项目的src/main中创建了webapp文件夹（而不是angular2项目中的dist文件夹）。当我运行 apache 服务器时，它显示以下错误。

从http://localhost:8080/app/app.module.js加载http://localhost:8080/vendor/angularfire2/angularfire2.js为“angularfire2”时出错；区域： ; 任务： Promise.then ；值：错误：错误：XHR 错误（404 未找到）正在加载http://localhost:8080/traceur (...) null

这看起来麻烦的依赖是angularfire2。怎么算我们的？顺便说一句，我使用 angular2 rc-5。

Answer 1

我想发布这个问题的完整答案，因为这个问题有很多观点。

答案适用于所有 Angular 2+ 版本。

程序如下。

1. 首先，您需要在项目的根目录中创建一个 POM 文件。将以下代码添加到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>

在这里，我包含了用于构建 war 文件的 maven war 插件以及用于使用 IntelliJ idea 运行 war 的 maven tomcat 插件。

2. 然后，您需要将 index.html 文件的基本 URL 更改为base href="/target-file-name"。如果您使用 maven tomcat 插件运行战争，您的应用程序的 URL 将为http://localhost:8080/target-file-name

3. 现在使用ng build --prod构建您的角度项目。这将在 dist 文件夹中创建所有必需的部署文件（构建文件）。

4. 现在运行mvn clean package将构建文件打包到 war 文件。war 文件将在项目根目录的目标文件夹内创建。

5. （可选）您也可以使用 maven tomcat 插件运行 war 文件。