Angular and spring boot are not binding together so they run on same port 8080

Question

my angular is running on 4200 port and my spring boot is running in 8080 port. Here I have build the angular project by ng build --prod and dist folder is produced. and they are in same directory inside eclipse-workspace

And i have added plugin inside the pom.xml file as

<plugin>
    <artifactId>maven-resources-plugin</artifactId>
    <executions>
          <execution>
              <id>copy-resources</id>
              <phase>validate</phase>
              <goals><goal>copy-resources</goal></goals>
              <configuration>
                  <outputDirectory>${basedir}/target/classes/static/</outputDirectory >
                  <resources>
                      <resource>
                          <directory>${basedir}/../Angular6SpringBoot-Client/dist/Angular6SpringBoot</directory >
                      </resource>
                  </resources>
              </configuration>
          </execution>
    </executions>
</plugin>

Inside the dist folder is:

i have updated the project inside eclipse and also cleaned and build the project and when i run the project the output is not coming in localhost:8080 as it shwows:

I need to integrate both angular and spring project and run at port 8080

https://stackoverflow.com/questions/53039138/whitelabel-error-page-404-spring-boot-angular-6/53039163#53039163 please check this — Abhishek Ekaanth, Oct 30 '18 at 06:55
I wrote a question-answer about it. It may help you I think : https://stackoverflow.com/questions/46913909/angular-and-spring-boot-configuration-to-make-them-work-together-efficiently — davidxxx, Oct 30 '18 at 06:57
abhishek at least u have output i am getting urlmapping not found error — ashwin karki, Oct 30 '18 at 08:17

Arun Patra · Answer 1 · 2018-10-30T09:23:12.803

You are wanting to bundle the Spring Boot app and the Angular SPA (single page app) in a single deployable unit. This deployable unit will finally become a war or a jar depending on your packaging. Assuming you have all these mechanics figured out, here's how to go about meeting your objectives:

First ensure that the AngularJS SPA is built properly and it does produce your index.html, css and js files and any other assets. Easiest (and would be handy) would be to use the frontend-maven-plugin. Here's parts of a sample pom.xml:

<artifactId>xxxxx</artifactId>
<name>Angular UI</name>
<description>Some AngularJS UI project</description>
<packaging>jar</packaging>

<build>
    <plugins>
        <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>1.6</version>
            <configuration>
                <nodeVersion>v7.10.1</nodeVersion>
                <npmVersion>4.2.0</npmVersion>
                <installDirectory>nodejs</installDirectory>
            </configuration>
            <executions>

                <execution>
                    <id>Install node and npm if needed</id>
                    <goals>
                        <goal>install-node-and-npm</goal>
                    </goals>
                    <phase>validate</phase>
                </execution>

                <execution>
                    <id>List current node and npm config</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <phase>validate</phase>
                    <configuration>
                        <arguments>run config</arguments>
                    </configuration>
                </execution>

                <execution>
                    <id>Install all node packages requested by this app</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <phase>validate</phase>
                    <configuration>
                        <arguments>install</arguments>
                    </configuration>
                </execution>

                <execution>
                    <id>Run tests</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <phase>test</phase>
                    <configuration>
                        <arguments>run test</arguments>
                    </configuration>
                </execution>

                <execution>
                    <id>Build distributable</id>
                    <goals>
                        <goal>npm</goal>
                    </goals>
                    <configuration>
                        <arguments>run deploy:prod</arguments>
                    </configuration>
                </execution>

            </executions>
        </plugin>

        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-resources-plugin</artifactId>
            <version>3.0.2</version>
            <configuration>
                <nonFilteredFileExtensions>
                    <nonFilteredFileExtension>woff</nonFilteredFileExtension>
                    <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
                    <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
                    <nonFilteredFileExtension>eot</nonFilteredFileExtension>
                    <nonFilteredFileExtension>swf</nonFilteredFileExtension>
                    <nonFilteredFileExtension>ico</nonFilteredFileExtension>
                    <nonFilteredFileExtension>png</nonFilteredFileExtension>
                    <nonFilteredFileExtension>svg</nonFilteredFileExtension>
                    <nonFilteredFileExtension>jpg</nonFilteredFileExtension>
                    <nonFilteredFileExtension>jpeg</nonFilteredFileExtension>
                </nonFilteredFileExtensions>
            </configuration>
        </plugin>
    </plugins>
    <resources>
        <resource>
            <directory>dist</directory>
            <targetPath>static</targetPath>
            <filtering>true</filtering>
        </resource>
    </resources>
</build>

You can use the above as an example and tailor for your own needs. But the resoult should be that, this should produce a jar such that there is a static folder under target\classes. In that static folder you would see your index.html and other assets. This is the first step to complete. If you have gotten this far correctly, your SPA jar that you just produced, can be added as a dependency in a Spring Boot application.

Next add the dependency of the above module you just produced in the pom.xml of your Spring Boot App.

Next you need to tell Spring Boot how to locate the index.html in response to requests for /. For this, you can add a configuration class as follows.

@Configuration
@Order(Ordered.HIGHEST_PRECEDENCE)
public class YourWebConfiguration extends WebMvcConfigurerAdapter{

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("forward:index.html");
    }
}

Now you could start your Spring Boot app let's say using mvn spring-boot:run. Let's also assume that your server port is 8080. Now point your browser to http://localhot:8080/. You will see your index.html in the browser.

Angular and spring boot are not binding together so they run on same port 8080

1 Answers1

Linked