Spring Boot应用程序-使用Angular构建过程不会更新Angular零件

时间:2018-12-11 20:33:55

标签: maven spring-boot

我的Spring Boot应用程序包含Java部分和Angular部分。 Angular部分(带有index.html等)生成到文件夹src / main / resources / static中。工作良好。我注意到在构建最终的JAR时,经常会丢失静态部分。

为什么?如何将static / HTML部分放入最终的Spring Boot JAR中?

我的pom.xml的部分如下所示。所有不重要的部分(例如单元测试等)都将被删除。

<build>
    ... 
    <plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>exec-maven-plugin</artifactId>
    <version>1.6.0</version>
    <executions>
      <execution>
        <id>npm install</id>
        <goals>
          <goal>exec</goal>
        </goals>
        <phase>initialize</phase>
        <configuration>
          <executable>npm</executable>
          <arguments>
            <argument>install</argument>
          </arguments>
        </configuration>
      </execution>
      <execution>
        <id>build Angular production code</id>
        <goals>
          <goal>exec</goal>
        </goals>
        <phase>compile</phase>
        <configuration>
          <executable>npm</executable>
          <arguments>
            <argument>run</argument>
            <argument>build</argument>
            <argument>--prod</argument>
          </arguments>
        </configuration>
      </execution>
    </executions>
  </plugin>
  ...
</build>

2 个答案:

答案 0 :(得分:1)

我正在使用validate阶段将静态角度资源复制到spring:

mvn clean install

使用父pom从Spring项目中拆分角度:

<modules>
    <module>phs-frontend</module>
    <module>phs-frontend-web</module>
</modules>

其中phs-frontend项目是一个带有pom文件和maven clean插件的有角项目:

<build>
    <plugins>
        <plugin>
            <artifactId>maven-clean-plugin</artifactId>
            <version>2.5</version>
            <configuration>
                <filesets>
                    <fileset>
                        <directory>dist</directory>
                        <includes>
                            <include>*</include>
                        </includes>
                    </fileset>
                </filesets>
            </configuration>
        </plugin>

        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>1.6</version>
            <executions>
                <execution>
                    <id>install node and npm</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <configuration>
                        <nodeVersion>v6.10.3</nodeVersion>
                        <npmVersion>5.6.0</npmVersion>
                    </configuration>
                </execution>

                <execution>
                    <id>npm install</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>install</arguments>
                    </configuration>
                </execution>

                <execution>
                    <id>npm run build</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>run build</arguments>
                    </configuration>
                </execution>

            </executions>
        </plugin>

    </plugins>
</build>

phs-frontend-web是Spring项目:

<build>
    <plugins>

        <plugin>
            <artifactId>maven-resources-plugin</artifactId>
            <version>2.6</version>
            <executions>
                <execution>
                    <id>copy-resources</id>
                    <phase>validate</phase>
                    <goals>
                        <goal>copy-resources</goal>
                    </goals>
                    <configuration>
        <outputDirectory>${project.build.outputDirectory}/static/</outputDirectory>
                        <encoding>UTF-8</encoding>
                        <nonFilteredFileExtensions>
                            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
                            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
                            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
                        </nonFilteredFileExtensions>
                        <resources>
                            <resource>
                                <directory>${project.basedir}/phs-frontend/dist</directory>
                                <filtering>true</filtering>
                                <includes>
                                    <include>**/*</include>
                                </includes>
                            </resource>
                        </resources>
                    </configuration>
                </execution>
            </executions>
        </plugin>           

        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
            <configuration>
                <executable>true</executable>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <configuration>
                <failOnMissingWebXml>false</failOnMissingWebXml>
            </configuration>
        </plugin>
    </plugins>
</build>

答案 1 :(得分:1)

谢谢@Carlos Cavero!你为我指明了正确的方向。非常感谢!

问题在于npm构建是在“编译”阶段完成的。在某些机器上,Java代码的“编译”阶段是在用Angular的“ npm build”进行“编译”之前完成的。

解决方案是将Angular(打字稿)npm阶段放在之前编译阶段。即:在“生成资源”阶段。它不可能是“验证”阶段,因为该阶段是在“安装”和“ npm安装”之前完成的。

现在这是正确的Angular / npm构建阶段。

<plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>exec-maven-plugin</artifactId>
    <version>1.6.0</version>
    <executions>
      <execution>
        <id>npm install</id>
        <goals>
          <goal>exec</goal>
        </goals>
        <phase>initialize</phase>
        <configuration>
          <executable>npm</executable>
          <arguments>
            <argument>install</argument>
          </arguments>
        </configuration>
      </execution>
      <execution>
        <id>build Angular production code</id>
        <goals>
          <goal>exec</goal>
        </goals>
        <phase>generate-resources</phase>
        <configuration>
          <executable>npm</executable>
          <arguments>
            <argument>run</argument>
            <argument>build</argument>
            <argument>--prod</argument>
          </arguments>
        </configuration>
      </execution>
    </executions>
 </plugin>