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


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

我想制作一个war文件，以将Angular2项目部署在Apache Tomcat服务器中。 我做了一个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。

相关讨论

我想对此问题发表完整的答案，因为对此问题有很多看法。

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

步骤如下。

  • 首先，您需要在项目的根目录中创建一个POM文件。将以下代码包含在POM中
    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
            <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>
            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>
                        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>
                        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想法运行war的maven tomcat插件。

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

  • 现在使用ng build --prod来构建角度项目。这将在dist文件夹中创建所有必需的部署文件(构建文件)。

  • 现在运行mvn clean package将您的构建文件打包为war文件。 war文件将在项目的根目录下的目标文件夹内创建。

  • (可选)您也可以使用maven tomcat插件运行war文件。

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

    如果要在本地部署。在localhost：8080(Tomcat)专门说，转到service.msc并启动tomcat Services。使用(ng build)构建您的angular 2 / angular 4。现在打开角度项目文件夹，然后将dist文件夹中的文件复制到新文件夹say(webui)。打开index.html页面，并指定为。将此文件夹复制到" C：\ Program Files \ Apache Software Foundation \ Tomcat 8.0 \ webapps"。转到浏览器，然后输入localhost：8080 / webui。

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