Run Spring4MVC with Angular 2 on a single server

Question

I am new to angular2, I want to know what is the possible file structure for SpringMVC4 with angular 2?

As shown in image, it will work for Angular 1.x but file structure of Angular 2 is quite different and its component driven, and I am using angular 2 file structure as given below

I searched a lot and I found that we can use Front end(using angular2) and back end(server- using spring/springboot) separately, but we need 2 server to run application. For example, Frontend : 192.168.100.1:4200 And Backend : 192.168.100.1:8080

So is there any way or general file structure to run both angular2 and spring4MVC on same server (like 192.168.100.1:8080)?

Thanks in advance. Answers will be appreciated!

Answer 1

No answers till now thats fine, I got solution. How I did ?

You need 2 contexts.

(1) Angular 2 project and

(2) Spring MVC

Follow below steps to achieve our main goal, to run SPRINGMVC + Angular2 on a single server.

1. Create normal Dynamic web project.
2. Add all dependancy required for spring or user maven pom.xml

3. Open CMD, navigate to angular2 application. Hit command

   npm install and then

   ng build or use ng build --prod for production

this command will create a "dist" folder, copy all files including all folders.

4. Paste those files and folders into WebContent directory.

5. Last thing, you need to change basehref="./" in index.html. Now you are ready to run server or you can deploy war file and serve it with tomcat or other servers.

If you are using Rest webservices and want to run angular2 and spring in a single server,

You need to put webServiceEndPointUrl as per your host url. For example, If you are running app on localhost:8080, you need to keep url

webServiceEndPointUrl= "http://localhost:8080/api/user"; at angular side. After that you can build and copy paste to your WebContent folder.

See below Image, File structure for springMVC+ANGULAR2

I know there are many drawbacks to use these way for running application on a single server, but if it must required you can follow this.

If you change anything at angular side, you need to copy paste dist folder all time and then you can deploy it!

Answer 2

You can automate your solution - just use frontend-maven-plugin (with which you can install nodejs and build the angular project) and maven-resources-plugin to copy the contents of /angular/dist/ directory into root of .war file (see also this article)

<plugin>
      <groupId>org.apache.maven.plugins</groupId>
      <artifactId>maven-resources-plugin</artifactId>
      <version>3.0.2</version>
      <executions>
        <execution>
          <id>default-copy-resources</id>
          <phase>process-resources</phase>
          <goals>
            <goal>copy-resources</goal>
          </goals>
          <configuration>
            <overwrite>true</overwrite>
            <outputDirectory>${project.build.directory}/${project.artifactId}-${project.version}/</outputDirectory>
            <resources>
              <resource>
                <directory>${project.basedir}/angular/dist</directory>
              </resource>
            </resources>
          </configuration>
        </execution>
      </executions>
</plugin>

And then you can use hot reload feature (while developing) on nodejs server, runned by ng serve with Angular CLI tool.