15

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

enter image description here

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 enter image description here

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!

2 Answers2

14

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.

  1. Paste those files and folders into WebContent directory.

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

enter image description here

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!

  • 1
    You wrote in step 5 to change basehref="./" in index.html. What is it supposed to be changed to? – Dewey Banks Sep 14 '17 at 17:35
  • 2
    If you are running your angular 2 app on lets say localhost:4200 then it will refer basehref="/" you can find basehref attribute in src/app/index.html . Now if you want to run this with springMVC (normal configurations * pattern), you will put all files of dist folder to webapps or WebcContent folder. Here you need to say from where spring can start rendering. [(dot-slash)./ means the current directory] [(slash) / is the root directory]. If you have another configurations, you may skip it. In general architecture I have tried and implemented successfully. Even you can try with / and ./ –  Sep 15 '17 at 18:19
  • 2
    Thanks for 5th point, it worked. Difference between / & ./ Is really necessary to understand. – Saloni Shah Jan 15 '18 at 18:15
  • 1
    Do i need to add static resource like ? – Bhargav Patel Apr 04 '18 at 16:29
  • Only index.hmlt is coming through. but when i click on list employee like localhost:8080/basebapth/listemployee. getting 404 – Bhargav Patel Apr 04 '18 at 17:33
  • 1
    I got my solution by using HashLocationStrategy – Bhargav Patel Apr 04 '18 at 18:50
  • Yes location & Hashlocationstrategy is mostly used in angular application, it will retain your data on refreshing page & it will also manage routing of components too –  Apr 05 '18 at 17:36
  • How does web.xml look like ? – Ankit Nov 18 '18 at 05:04
  • I have done the above steps.I get error forbidden when loading the page.how can i fix that ? – Shalika Apr 26 '19 at 12:07
  • @Shalika, can you give me some brief idea about how are you hosting it? Is your .htaccess file matter? Let me know so i can help you! –  May 02 '19 at 18:22
  • Actually i have no idea about .htaccess file.how shuold i configure it ? Thanks in advance. – Shalika May 03 '19 at 08:22
8

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.

Dan Brandt
  • 605
  • 1
  • 7
  • 21