How can I use spring-boot webapp with angular 2 frontend (angular-cli build) for Tomcat?

Question

How can I use spring-boot webapp with angular 2 frontend (angular-cli build) for Tomcat?

I have a spring-boot web app and I am building my frontend with angular-cli. I set the output directory of my angular build angular-cli.json

to resources / static and I configured my script construct in the package.json

following way:

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

In the app.properties of the spring-boot config I have set server.contextPath

to 'mywebapp'.

But if I build angular app the included js files of the generated index.html in resources / static do not contain the path to the server "mywebapp":

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

but I should look like this:

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

So, if I deploy my spring-boot application to tomcat, then the inline index.html is loaded, but it cannot find the imported js files and tries to upload the files to http: // localhost: 8080 / instead of http: // localhost: 8080 / mywebapp / .

How can I deploy a spring-boot application with angular-frontend on tomcat server if I don't want to deploy it in the root directory?

+3

spring spring-boot angular tomcat angular-cli

surfspider May 22 '17 at 14:39

source to share

2 answers

I had the same question, first I created a pom.xml file and there I used plugins to convert my package to war file.

<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>