如何从 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>

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

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

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

4. 现在运行mvn clean package将你的构建文件打包成一个 war 文件。 war 文件将在项目根目录的目标文件夹中创建。

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

Answer 2

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

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

Answer 3

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