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

Question

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

将http://localhost:8080/vendor/angularfire2/angularfire2.js作为"angularfire2“从http://localhost:8080/app/app.module.js加载的错误；区域：；任务: Promise.then；值:错误:错误: XHR错误(404未找到)加载http://localhost:8080/traceur(…)空

这看起来像麻烦的依赖关系是angularfire2。怎么弄明白这是我们的？顺便说一下，我用的是angular2 rc-5。

Answer 1

我想就这个问题提出一个完整的答案，因为对这个问题有很多意见。

这个答案适用于所有的角度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插件。

1. 然后，您需要将index.html文件的基本URL更改为base href="/target- file -name"。如果使用maven tomcat插件运行war，则应用程序的URL为http://localhost:8080/target-file-name。
2. 现在使用ng build -prod构建您的角项目。这将在dist文件夹中创建所有必需的部署文件(生成文件)。
3. 现在运行mvn干净包将构建文件打包到war文件中。war文件将在项目根目录中的目标文件夹中创建。
4. (可选)您也可以使用maven tomcat插件运行war文件。

Answer 2

如果您想在本地部署。具体来说，在localhost:8080( tomcat )，转到service.msc并启动tomcat服务。使用(ng编译)构建您的角2 /angular 4。现在，打开文件夹，并将dist文件夹中的文件复制到一个新文件夹，例如(Webui)。打开index.html页面并给出。将此文件夹复制到"C:\Program \\Tomcat8.0\webapp“。转到浏览器并键入localhost:8080/webui。

这就是我如何在tomcat中部署我的角4静态内容。希望这能帮到你。

Answer 3

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