如何将 Angular 8 项目构建为 .war 文件答案

【问题标题】：How to build angular 8 project as .war file如何将 Angular 8 项目构建为 .war 文件
【发布时间】：2020-05-14 12:37:06
【问题描述】：

我想知道如何将 Angular 应用程序构建为 .war 文件，以便我可以使用 maven 部署到 WAS 服务器

【问题讨论】：

标签： javascript java angular maven user-interface

【解决方案1】：

war 文件结构如下所示

Root/ - Web resources.
    WEB-INF/ - directory for application support
       lib/ - supporting jar files
       web.xml - configuration file for the application

将您的 html、js 和 css 文件放在将用作 Web 资源的 war 文件的根目录中。您可以忽略 WEB-INF/lib 文件夹，因为 Angular 不需要任何 java 库。

【讨论】：

是否可以从我的代码编辑器本身构建war文件有任何命令！！
您应该使用 maven 或 gradle 等构建工具来构建易于实现的 war 文件。
你能帮我把 maven build as war file 的链接给我吗
dzone.com/articles/… 可能会有所帮助

【解决方案2】：

您可以尝试将 grunt 用于 angular-grunt-build。请参考https://www.npmjs.com/package/angular-grunt-build

【讨论】：

【解决方案3】：

您可以使用 maven 通过创建一个构建插件来执行 Angular 应用程序的构建。构建插件将在构建期间执行，它们应该在 POM 的元素中配置。


    <build>
        <plugins>
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <executions>
                    <execution>
                        <id>npm install</id>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <phase>install</phase>
                        <configuration>
                            <executable>npm</executable>
                            <arguments>
                                <argument>install</argument>
                            </arguments>
                        </configuration>
                    </execution>
                    <execution>
                        <id>npm build</id>
                        <goals>
                            <goal>exec</goal>
                        </goals>
                        <phase>install</phase>
                        <configuration>
                            <executable>npm</executable>
                            <arguments>
                                <argument>run</argument>
                                <argument>build</argument>
                            </arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

重要的是你之前已经安装了node js, npm。如果不是，maven 构建将失败，因为它不会找到需要运行 Angular 应用程序构建的环境。

之后我们修改 maven-war-plugin。我们在下面指定的目录将是 maven build 生成的 war 中的 location angular app。

            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <configuration>
                    <failOnMissingWebXml>false</failOnMissingWebXml>
                    <webResources>

                        <resource>
                            <targetPath>resources</targetPath>
                            <filtering>false</filtering>
                            <!-- this is relative to the pom.xml directory -->
                            <directory>../path when you want to put angular app /dist/</directory>
                            <includes>
                                <include>**/*.*</include>
                            </includes>
                        </resource
                    </webResources>
                </configuration>
            </plugin>

【讨论】：