How can I deploy a spring-boot webapp with angular 2 frontend (angular-cli build) to Tomcat?

Question

I have a spring-boot web application and I build my frontend with angular-cli. I have set the output directory of my angular build in angular-cli.json to resources/static and I have configured the build script in package.json like this:

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

In the application.properties of the spring-boot configuration I have set the server.contextPath to 'mywebapp'.

But if I build the angular application the included js files of the created index.html in resources/static does not contain the server context path '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 app to tomcat the built index.html is load but it cannot find the imported js files and tries to load the files under http://localhost:8080/ instead of http://localhost:8080/mywebapp/.

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

Funny because you are asking how to do it, and you actually show how to do it, which I couldn't find. Your real question is "How can I deploy Angular and Spring to a certain path?". — GabrielBB
– GabrielBB, Commented Sep 1, 2017 at 1:48

Ahmed Musallam · Accepted Answer · 2017-05-22 16:27:09Z

1

Please take a look at my answer for using '--deploy-url' parameter. https://stackoverflow.com/a/43741602/5633515

In your case, use --deploy-url="/mywebapp/"

answered May 22, 2017 at 16:27

Ahmed Musallam

9,7634 gold badges29 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

surfspider Over a year ago

Thank you it worked for me. Now I can access my angular frontend under the url localhost:8080/mywebapp. But one problem remains. If I want to make a browser refresh of an angular routerlink URL (i.e. localhost:8080/mywebapp/feature1), it does not work anymore. The angular app navigates correctly to localhost:8080/mywebapp/feature1 but only the refresh of this URL does not work anymore. Refresh of the angular root URL works (localhost:8080/mywebapp)

Ahmed Musallam Over a year ago

Thats seems to me like a code issue and not related to angular being loaded. Do you see the correct angular script tags on refresh of that feature url? Do you see console errors?

surfspider Over a year ago

I found the solution here: stackoverflow.com/questions/44132284/…

Mauricio De La Quintana · Accepted Answer · 2017-05-22 18:16:10Z

I've had the same question, first I've created a pom.xml file and there I've used plugins to convert my package to a 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>

when deploying I've found some issues and good lectures.

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

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

hope it helps.

Collectives™ on Stack Overflow

How can I deploy a spring-boot webapp with angular 2 frontend (angular-cli build) to Tomcat?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related