6

我想制作一个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 Not Found) loading http://localhost:8080/traceur (...) null

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

4

3 回答 3

5

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

答案适用于所有 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。

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

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

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

  4. （可选）您也可以使用 maven tomcat 插件运行 war 文件。
于 2019-03-18T03:42:55.300 回答
0

如果你想在本地部署。具体说在 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 静态内容的方式。希望这对您有所帮助。

于 2017-07-11T11:05:38.743 回答
0

在您的 index.html 中，将 base href 设置为“”，或者在您的情况下（tomcat）设置为适用于我的“webapps”

于 2017-10-25T18:50:11.057 回答