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

Question

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

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

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

Answer 1

如果你想在本地部署。具体说在 localhost:8080(Tomcat) ，转到 service.msc 并启动 tomcat 服务。使用 (ng build) 构建您的 angular 2 /angular 4。现在打开 angular 项目文件夹并将 dist 文件夹中的文件复制到新文件夹 say(webui)。打开 index.html 页面并给出 as 。将此文件夹复制到 "C:\Program Files\Apache Software Foundation\Tomcat 8.0\webapps"。转到浏览器并输入 localhost:8080/webui.

这就是我在 tomcat 中部署 angular 4 个静态内容的方式。希望这对你有帮助。

Answer 2

在您的 index.html 中，将 base href 设置为“”，或者在您的情况下 (tomcat) 设置为对我有用的 "webapps"

Answer 3

我想 post 完整回答这个问题，因为这个问题有很多观点。

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

程序如下

首先您需要在项目的根目录中创建一个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 插件以及用于运行 war 的 maven tomcat 插件使用 IntelliJ 想法。

然后您需要将 index.html 文件的基础 URL 更改为 base href="/target-file-name". 如果您使用 Maven tomcat 插件运行宁 war，则您的应用的 URL 将是 http://localhost:8080/target-file-name
现在使用 ng build --prod 构建您的 angular 项目。这将在 dist 文件夹中创建所有必需的部署文件（构建文件）。
现在运行 mvn clean package 将构建文件打包到 war 文件。 war 文件将在项目根目录的目标文件夹中创建。
（可选）您也可以使用 Maven tomcat 插件运行 war 文件。

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

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

maven

firebase

angular-promise

angularfire2

angular