如何将带有Angular 2前端（使用angular-cli构建）的Spring Boot Web应用部署到Tomcat？

Question

我有一个使用Spring Boot框架的Web应用程序，前端使用angular-cli构建。我已将angular构建的输出目录设置为angular-cli.json中的resources/static，并且我已经像这样配置了package.json中的构建脚本：

"scripts" : {"build": "ng build --base-href /mywebapp", ...}

在spring-boot配置的application.properties中，我已将server.contextPath设置为'mywebapp'。但是，如果我构建angular应用程序，则创建的index.html中resources/static包含的js文件不包含服务器上下文路径'mywebapp':

<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>

但我应该看起来像这样：

<script type="text/javascript" src="/mywebapp/inline.bundle.js"></script>
<script type="text/javascript" src="/mywebapp/polyfills.bundle.js"></script>

如果我将我的spring-boot应用程序部署到tomcat，构建的index.html将被加载，但它无法找到导入的js文件，并尝试在http://localhost:8080/下加载文件而不是在http://localhost:8080/mywebapp/下加载文件。

如果我不想将一个带有angular前端的spring-boot应用程序部署在根目录下，我该如何将其部署到tomcat服务器上？

- surfspider

---

有趣的是你正在问如何做，而你实际上展示了如何做，这是我找不到的。你真正的问题是“我如何将Angular和Spring部署到特定路径？” - GabrielBB

Answer 1

请查看我对使用“--deploy-url”参数的答案。 https://stackoverflow.com/a/43741602/5633515 在您的情况下，请使用--deploy-url="/mywebapp/"。

- Ahmed Musallam

---

谢谢，它对我有用。现在我可以通过URL http://localhost:8080/mywebapp/ 访问我的Angular前端。但是仍然存在一个问题。如果我想要刷新Angular路由链接的URL（即http://localhost:8080/mywebapp/feature1/），它不再起作用。Angular应用程序正确导航到http://localhost:8080/mywebapp/feature1/，但只有这个URL的刷新不再起作用。刷新Angular根URL（http://localhost:8080/mywebapp/）可以正常工作。 - surfspider

这对我来说似乎是一个代码问题，而不是与Angular加载有关。在刷新该功能URL时，您是否看到正确的Angular脚本标记？您是否看到控制台错误？ - Ahmed Musallam

我在这里找到了解决方案：https://stackoverflow.com/questions/44132284/problems-with-angular-deploy-url-switch - surfspider

Answer 2

我曾经有同样的问题，首先我创建了一个pom.xml文件，然后使用插件将我的包转换为war文件。

<plugins>

  <!-- ############################## -->
  <!-- npm scripts                    -->
  <!-- ############################## -->

  <plugin>
    <groupId>org.codehaus.mojo</groupId>
    <artifactId>exec-maven-plugin</artifactId>
    <executions>
      <execution>
        <id>exec-project-dependencies-install</id>
        <phase>generate-sources</phase>
        <configuration>
          <executable>npm</executable>
          <arguments>
            <argument>install</argument>
          </arguments>
        </configuration>
        <goals>
          <goal>exec</goal>
        </goals>
      </execution>

      <!-- run `ng build -prod -aot` -->
      <!-- * clean dist/ before generating distribution files -->
      <execution>
        <id>exec-compile</id>
        <phase>generate-sources</phase>
        <configuration>
          <executable>npm</executable>
          <arguments>
            <argument>run</argument>
            <argument>ci</argument>
          </arguments>
        </configuration>
        <goals>
          <goal>exec</goal>
        </goals>
      </execution>
    </executions>
  </plugin>

  <!-- generate zip -->
  <plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-assembly-plugin</artifactId>
    <version>2.3</version>
    <configuration>
      <descriptors>
        <descriptor>src/assembly/static.xml</descriptor>
      </descriptors>
    </configuration>
    <executions>
      <execution>
        <id>make-assembly</id>
        <phase>package</phase>
        <goals>
          <goal>single</goal>
        </goals>
      </execution>
    </executions>
  </plugin>
   <!--generate zip -->
  <plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-assembly-plugin</artifactId>
    <version>2.3</version>
    <configuration>
      <descriptors>
        <descriptor>src/assembly/static.xml</descriptor>
      </descriptors>
    </configuration>
    <executions>
      <execution>
        <id>make-assembly</id>
        <phase>package</phase>
        <goals>
          <goal>single</goal>
        </goals>
      </execution>
    </executions>
  </plugin>

在部署时，我发现了一些问题和好的讲座。

理论 - https://kosbr.github.io/2016/10/09/angular-build.html

问题 - https://github.com/angular/angular-cli/issues/4517 - https://github.com/angular/angular-cli/pull/4090

希望这能有所帮助。

- Mauricio De La Quintana