{"id":1940,"date":"2022-09-13T13:55:08","date_gmt":"2022-09-13T11:55:08","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=1940"},"modified":"2022-09-13T13:55:08","modified_gmt":"2022-09-13T11:55:08","slug":"how-to-develop-and-build-angular-app-with-java-spring-boot-backend","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2022\/09\/13\/how-to-develop-and-build-angular-app-with-java-spring-boot-backend\/","title":{"rendered":"How To Develop and Build Angular App With Java Spring Boot Backend"},"content":{"rendered":"\n<p>Angular is a javascript framework for building web apps and it doesn\u2019t load itself in the browser. We need some kind of mechanism that loads the index.html (single page) of Angular with all the dependencies(CSS and js files) in the browser. There are many ways we can build the apps and ship for production. One way is to build the apps and serve it  in a NodeJS Environment. Another way is to build the angular and serve that static content with NGINX web server.  Or we can also use java. <em><span class=\"has-inline-color has-vivid-cyan-blue-color\">With Java we would have to deal with the server code as well, for example, you need to load index.html page with java.<\/span><\/em><\/p>\n\n\n\n<p>In this case, we are using java as the webserver which loads Angular assets and accepts any API calls from the Angular app.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-10.png\" alt=\"\" class=\"wp-image-2195\" width=\"368\" height=\"214\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-10.png 590w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-10-300x174.png 300w\" sizes=\"(max-width: 368px) 100vw, 368px\" \/><\/figure><\/div>\n\n\n\n<p><em>If you look at the above diagram all the web requests without the\u00a0<strong>\/api\u00a0<\/strong>will go to Angular routing. All the paths that contain\u00a0<strong>\/api\u00a0<\/strong>will be handled by the Java server.<\/em><\/p>\n\n\n\n<h4>Prerequisites<\/h4>\n\n\n\n<p>There are some prerequisites for this article. You need to have java installed on your laptop and how http works. If you want to practice and run this on your laptop you need to have these on your laptop.<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/www.java.com\/en\/download\/\" rel=\"noreferrer noopener\" target=\"_blank\">Java<\/a><\/li><li><a href=\"https:\/\/cli.angular.io\/\" rel=\"noreferrer noopener\" target=\"_blank\">Angular CLI<\/a><\/li><li><a href=\"https:\/\/www.typescriptlang.org\/\" rel=\"noreferrer noopener\" target=\"_blank\">Typescript<\/a><\/li><li><a href=\"https:\/\/code.visualstudio.com\/\" rel=\"noreferrer noopener\" target=\"_blank\">VSCode<\/a><\/li><li><a href=\"https:\/\/valor-software.com\/ngx-bootstrap\/#\/\" rel=\"noreferrer noopener\" target=\"_blank\">ngx-bootstrap<\/a><\/li><li><a href=\"http:\/\/maven.apache.org\/\" rel=\"noreferrer noopener\" target=\"_blank\">Maven<\/a><\/li><\/ul>\n\n\n\n<h4>Example Project<\/h4>\n\n\n\n<p>This is a simple project which demonstrates developing and running Angular application with Java. We have a simple app in which we can add users, count, and display them at the side, and retrieve them whenever you want.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/ng-java.gif\" alt=\"\" class=\"wp-image-2196\" width=\"542\" height=\"309\"\/><\/figure><\/div>\n\n\n\n<p>As you add users we are making an API call to the Java server to store them and get the same data from the server when we retrieve them. You can see network calls in the following video.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/ng-java-2.gif\" alt=\"\" class=\"wp-image-2197\" width=\"566\" height=\"322\"\/><\/figure><\/div>\n\n\n\n<p>Here is a Github link to this project. You can clone it and run it on your machine.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ clone the project\r\ngit clone https:\/\/github.com\/bbachi\/angular-java-example.git\r\n\/\/ Run Angular on port 4200\r\ncd \/src\/main\/ui\r\nnpm install\r\nnpm start\r\n\/\/ Run Java Code on 8080\r\nmvn clean install\r\njava -jar target\/users-0.0.1-SNAPSHOT.jar<\/code><\/pre>\n\n\n\n<h4><strong><em><span class=\"has-inline-color has-vivid-cyan-blue-color\">How To Build and Develop The Project<\/span><\/em><\/strong><\/h4>\n\n\n\n<p>Usually, the way you develop and the way you build and run in production are completely different. <\/p>\n\n\n\n<p>In the development phase, we run the java server and the Angular app on completely different ports. It\u2019s easier and faster to develop that way. If you look at the following diagram the Angular app is running on port\u00a0<strong>4200<\/strong>\u00a0with the help of a webpack dev server and the java server is running on port\u00a0<strong>8080<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-11.png\" alt=\"\" class=\"wp-image-2198\" width=\"488\" height=\"223\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-11.png 591w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-11-300x137.png 300w\" sizes=\"(max-width: 488px) 100vw, 488px\" \/><\/figure><\/div>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-cyan-blue-color\">Project Structure<\/span><\/h4>\n\n\n\n<p>Let\u2019s understand the project structure for this project. We need to have two completely different folders for java and angular. It\u2019s always best practice to have completely different folders for each one. In this way, you will have a clean architecture or any other problems regarding merging any files.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-12.png\" alt=\"\" class=\"wp-image-2199\" width=\"486\" height=\"211\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-12.png 571w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-12-300x130.png 300w\" sizes=\"(max-width: 486px) 100vw, 486px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"504\" height=\"410\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-13.png\" alt=\"\" class=\"wp-image-2200\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-13.png 504w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-13-300x244.png 300w\" sizes=\"(max-width: 504px) 100vw, 504px\" \/><\/figure><\/div>\n\n\n\n<p>If you look at the above project structure, all the Angular app resides under the\u00a0<strong><em>src\/main\/ui<\/em><\/strong>\u00a0folder and Java code resides under the\u00a0<strong><em>src\/main\/java<\/em><\/strong>\u00a0folder. All the resources are under the folder\u00a0<strong><em>\/src\/main\/resources<\/em><\/strong>\u00a0such as properties, static assets, etc<\/p>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-cyan-blue-color\">Java API<\/span><\/h4>\n\n\n\n<p>We use spring boot and a lot of other tools such as Spring Devtools, Spring Actuator, etc under the spring umbrella. Nowadays almost every application has spring boot and it is an open-source Java-based framework used to create a micro Service. It is developed by the Pivotal Team and is used to build stand-alone and production-ready\u00a0<strong>spring<\/strong>\u00a0applications.<\/p>\n\n\n\n<p>We start with Spring initializr and select all the dependencies and generate the zip file.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"582\" height=\"363\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-14.png\" alt=\"\" class=\"wp-image-2201\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-14.png 582w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-14-300x187.png 300w\" sizes=\"(max-width: 582px) 100vw, 582px\" \/><\/figure><\/div>\n\n\n\n<p>Once you import the zip file in the eclipse or any other IDE as a Maven project you can see all the dependencies in the\u00a0<strong>pom.xml.\u00a0<\/strong>Below is the dependencies section of pom.xml.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;dependencies>\r\n&lt;dependency>\r\n\t&lt;groupId>org.springframework.boot&lt;\/groupId>\r\n\t&lt;artifactId>spring-boot-starter-actuator&lt;\/artifactId>\r\n&lt;\/dependency>\r\n&lt;dependency>\r\n\t&lt;groupId>org.springframework.boot&lt;\/groupId>\r\n\t&lt;artifactId>spring-boot-starter-data-jpa&lt;\/artifactId>\r\n&lt;\/dependency>\r\n&lt;dependency>\r\n\t&lt;groupId>com.h2database&lt;\/groupId>\r\n\t&lt;artifactId>h2&lt;\/artifactId>\r\n\t&lt;scope>runtime&lt;\/scope>\r\n\t&lt;version>1.4.199&lt;\/version>\r\n&lt;\/dependency>\r\n&lt;dependency>\r\n\t&lt;groupId>org.springframework.boot&lt;\/groupId>\r\n\t&lt;artifactId>spring-boot-starter-data-rest&lt;\/artifactId>\r\n&lt;\/dependency>\r\n&lt;dependency>\r\n\t&lt;groupId>org.springframework.boot&lt;\/groupId>\r\n\t&lt;artifactId>spring-boot-starter-hateoas&lt;\/artifactId>\r\n&lt;\/dependency>\r\n&lt;dependency>\r\n\t&lt;groupId>org.springframework.boot&lt;\/groupId>\r\n\t&lt;artifactId>spring-boot-starter-web&lt;\/artifactId>\r\n&lt;\/dependency>\r\n&lt;dependency>\r\n\t&lt;groupId>org.springframework.data&lt;\/groupId>\r\n\t&lt;artifactId>spring-data-rest-hal-browser&lt;\/artifactId>\r\n&lt;\/dependency>\r\n&lt;!-- QueryDSL -->\r\n&lt;dependency>\r\n\t&lt;groupId>com.querydsl&lt;\/groupId>\r\n\t&lt;artifactId>querydsl-apt&lt;\/artifactId>\r\n&lt;\/dependency>\r\n&lt;dependency>\r\n\t&lt;groupId>com.querydsl&lt;\/groupId>\r\n\t&lt;artifactId>querydsl-jpa&lt;\/artifactId>\r\n&lt;\/dependency>\r\n\r\n&lt;dependency>\r\n\t&lt;groupId>com.h2database&lt;\/groupId>\r\n\t&lt;artifactId>h2&lt;\/artifactId>\r\n\t&lt;scope>runtime&lt;\/scope>\r\n&lt;\/dependency>\r\n\r\n&lt;dependency>\r\n\t&lt;groupId>org.springframework.boot&lt;\/groupId>\r\n\t&lt;artifactId>spring-boot-devtools&lt;\/artifactId>\r\n\t&lt;scope>runtime&lt;\/scope>\r\n\t&lt;optional>true&lt;\/optional>\r\n&lt;\/dependency>\r\n&lt;dependency>\r\n\t&lt;groupId>org.projectlombok&lt;\/groupId>\r\n\t&lt;artifactId>lombok&lt;\/artifactId>\r\n\t&lt;optional>true&lt;\/optional>\r\n&lt;\/dependency>\r\n&lt;dependency>\r\n\t&lt;groupId>org.springframework.boot&lt;\/groupId>\r\n\t&lt;artifactId>spring-boot-starter-test&lt;\/artifactId>\r\n\t&lt;scope>test&lt;\/scope>\r\n\t&lt;exclusions>\r\n\t\t&lt;exclusion>\r\n\t\t\t&lt;groupId>org.junit.vintage&lt;\/groupId>\r\n\t\t\t&lt;artifactId>junit-vintage-engine&lt;\/artifactId>\r\n\t\t&lt;\/exclusion>\r\n\t&lt;\/exclusions>\r\n&lt;\/dependency>\r\n&lt;\/dependencies><\/code><\/pre>\n\n\n\n<p>Here are the spring boot file and the controller with two routes one with GET request and another is POST request.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/USers.Application.java\n\npackage com.bbtutorials.users;\r\n\r\nimport org.springframework.boot.SpringApplication;\r\nimport org.springframework.boot.autoconfigure.SpringBootApplication;\r\n\r\n@SpringBootApplication\r\npublic class UsersApplication {\r\n\r\n\tpublic static void main(String&#91;] args) {\r\n\t   SpringApplication.run(UsersApplication.class, args);\r\n\t}\r\n\r\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/UsersController.java\n\npackage com.bbtutorials.users.controller;\r\n\r\nimport java.util.List;\r\n\r\nimport org.springframework.beans.factory.annotation.Autowired;\r\nimport org.springframework.http.ResponseEntity;\r\nimport org.springframework.web.bind.annotation.GetMapping;\r\nimport org.springframework.web.bind.annotation.PostMapping;\r\nimport org.springframework.web.bind.annotation.RequestBody;\r\nimport org.springframework.web.bind.annotation.RequestMapping;\r\nimport org.springframework.web.bind.annotation.RestController;\r\n\r\nimport com.bbtutorials.users.entity.Users;\r\nimport com.bbtutorials.users.links.UserLinks;\r\nimport com.bbtutorials.users.service.UsersService;\r\n\r\nimport lombok.extern.slf4j.Slf4j;\r\n\r\n@Slf4j\r\n@RestController\r\n@RequestMapping(\"\/api\/\")\r\npublic class UsersController {\r\n\t\r\n    @Autowired\r\n    UsersService usersService;\r\n\t\r\n    @GetMapping(path = UserLinks.LIST_USERS)\r\n    public ResponseEntity&lt;?> listUsers() {\r\n        log.info(\"UsersController:  list users\");\r\n        List&lt;Users> resource = usersService.getUsers();\r\n        return ResponseEntity.ok(resource);\r\n    }\r\n\t\r\n\t@PostMapping(path = UserLinks.ADD_USER)\r\n\tpublic ResponseEntity&lt;?> saveUser(@RequestBody Users user) {\r\n        log.info(\"UsersController:  list users\");\r\n        Users resource = usersService.saveUser(user);\r\n        return ResponseEntity.ok(resource);\r\n    }\r\n}<\/code><\/pre>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-cyan-blue-color\">Configure H2 Database<\/span><\/h4>\n\n\n\n<p>This H2 Database is for development only. When you build this project for production you can replace it with any database of your choice. You can run this database standalone without your application. We will see how we can configure with spring boot.<\/p>\n\n\n\n<p>First, we need to add some properties to application.properties file under\u00a0<strong>\/src\/main\/resources<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/application.properties\nspring.datasource.url=jdbc:h2:mem:testdb\r\nspring.datasource.driverClassName=org.h2.Driver\r\nspring.datasource.username=sa\r\nspring.datasource.password=password\r\nspring.jpa.database-platform=org.hibernate.dialect.H2Dialect\r\nspring.h2.console.enabled=true<\/code><\/pre>\n\n\n\n<p>Second, add the below SQL file under the same location.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/data.sql\n\nDROP TABLE IF EXISTS users;\r\n\r\nCREATE TABLE users (\r\n  id INT PRIMARY KEY,\r\n  FIRST_NAME VARCHAR(250) NOT NULL,\r\n  LAST_NAME VARCHAR(250) NOT NULL,\r\n  EMAIL VARCHAR(250) NOT NULL\r\n);\r\n\r\nINSERT INTO users (ID, FIRST_NAME, LAST_NAME, EMAIL) VALUES\r\n  (1, 'first', 'last 1', 'abc1@gmail.com'),\r\n  (2, 'first', 'last 2', 'abc2@gmail.com'),\r\n  (3, 'first', 'last 3', 'abc3@gmail.com');<\/code><\/pre>\n\n\n\n<p>Third, start the application and spring boot creates this table on startup. Once the application is started you can go to this URL\u00a0<a rel=\"noreferrer noopener\" href=\"http:\/\/localhost:8080\/api\/h2-console\" target=\"_blank\">http:\/\/localhost:8080\/api\/h2-console<\/a>\u00a0and access the database on the web browser. Make sure you have the same JDBC URL, username and password as in the properties file.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-15.png\" alt=\"\" class=\"wp-image-2202\" width=\"548\" height=\"323\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-15.png 594w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-15-300x177.png 300w\" sizes=\"(max-width: 548px) 100vw, 548px\" \/><\/figure><\/div>\n\n\n\n<p>Let\u2019s add the repository files, service files, and entity classes as below and start the spring boot app.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/Users.java\npackage com.bbtutorials.users.entity;\r\n\r\nimport javax.persistence.Column;\r\nimport javax.persistence.Entity;\r\nimport javax.persistence.Id;\r\nimport javax.validation.constraints.NotNull;\r\n\r\n\r\nimport lombok.Data;\r\n\r\n@Entity\r\n@Data\r\npublic class Users {\r\n\t\r\n\t@Id\r\n\t@Column\r\n    private long id;\r\n\r\n    @Column\r\n    @NotNull(message=\"{NotNull.User.firstName}\")\r\n    private String firstName;\r\n    \r\n    @Column\r\n    @NotNull(message=\"{NotNull.User.lastName}\")\r\n    private String lastName;\r\n    \r\n    @Column\r\n    @NotNull(message=\"{NotNull.User.email}\")\r\n    private String email;\r\n\r\n}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/UsersRepository.java\n\npackage com.bbtutorials.users.repository;\r\n\r\nimport org.springframework.data.jpa.repository.JpaRepository;\r\nimport org.springframework.data.jpa.repository.JpaSpecificationExecutor;\r\nimport org.springframework.data.querydsl.QuerydslPredicateExecutor;\r\nimport org.springframework.data.rest.core.annotation.RepositoryRestResource;\r\n\r\nimport com.bbtutorials.users.entity.Users;\r\n\r\n@RepositoryRestResource()\r\npublic interface UsersRepository extends JpaRepository&lt;Users, Integer>, JpaSpecificationExecutor&lt;Users>, QuerydslPredicateExecutor&lt;Users> {}<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/UsersService.java\n\npackage com.bbtutorials.users.service;\r\n\r\nimport java.util.List;\r\n\r\nimport org.springframework.stereotype.Component;\r\n\r\nimport com.bbtutorials.users.entity.Users;\r\nimport com.bbtutorials.users.repository.UsersRepository;\r\n\r\n@Component\r\npublic class UsersService {\r\n\t\r\n\tprivate UsersRepository usersRepository;\r\n\r\n    public UsersService(UsersRepository usersRepository) {\r\n        this.usersRepository = usersRepository;\r\n    }\r\n\r\n    public List&lt;Users> getUsers() {\r\n        return usersRepository.findAll();\r\n    }\r\n    \r\n    public Users saveUser(Users users) {\r\n    \treturn usersRepository.save(users);\r\n    }\r\n\r\n}<\/code><\/pre>\n\n\n\n<p><em><span class=\"has-inline-color has-vivid-cyan-blue-color\">You can start the application in two ways: you can <strong>right-click<\/strong> on the UsersApplication and run it as a <strong>java application<\/strong> or do the following steps.<\/span><\/em><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ mvn install\r\nmvn clean install\r\n\/\/ run the app\r\njava -jar target\/&lt;repo>.war<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"800\" height=\"478\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/ng-java-3.gif\" alt=\"\" class=\"wp-image-2203\"\/><\/figure><\/div>\n\n\n\n<p>Finally, you can list all the users with this endpoint :  <em><strong><a rel=\"noreferrer noopener\" href=\"http:\/\/localhost:8080\/api\/users\" target=\"_blank\">http:\/\/localhost:8080\/api\/users<\/a>.<\/strong><\/em><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"554\" height=\"344\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-16.png\" alt=\"\" class=\"wp-image-2204\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-16.png 554w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-16-300x186.png 300w\" sizes=\"(max-width: 554px) 100vw, 554px\" \/><\/figure><\/div>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-purple-color\">Angular App<\/span><\/h4>\n\n\n\n<p>Now the java code is running on port\u00a0<strong>8080<\/strong>. Now it\u2019s time to look at the Angular app. The entire Angular app is under the folder\u00a0<strong><em>src\/main\/ui<\/em><\/strong>. You can create with this command\u00a0<code><em><span class=\"has-inline-color has-vivid-cyan-blue-color\">ng new ui<\/span><\/em><\/code>.<\/p>\n\n\n\n<p>Let\u2019s see some important files here. Here is the service file which calls Java API.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/app.service.ts\n\nimport { Injectable } from '@angular\/core';\r\nimport { HttpClient } from '@angular\/common\/http';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class AppService {\r\n\r\n  constructor(private http: HttpClient) { }\r\n\r\n  rootURL = '\/api';\r\n\r\n  getUsers() {\r\n    return this.http.get(this.rootURL + '\/users');\r\n  }\r\n\r\n  addUser(user: any, id: number) {\r\n\tuser.id = id;\r\n\treturn this.http.post(this.rootURL + '\/user', user);\r\n  }\r\n\r\n}<\/code><\/pre>\n\n\n\n<p>Here is the app component which subscribes to these calls and gets the data from the API.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/app.component.ts\nimport { Component, OnDestroy } from '@angular\/core';\r\nimport { FormGroup, FormControl, Validators } from '@angular\/forms';\r\nimport { AppService } from '.\/app.service';\r\nimport { takeUntil } from 'rxjs\/operators';\r\nimport { Subject } from 'rxjs';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: &#91;'.\/app.component.css']\r\n})\r\nexport class AppComponent implements OnDestroy {\r\n\r\n  constructor(private appService: AppService) {}\r\n\r\n  title = 'angular-nodejs-example';\r\n\r\n  userForm = new FormGroup({\r\n    firstName: new FormControl('', Validators.nullValidator &amp;&amp; Validators.required),\r\n    lastName: new FormControl('', Validators.nullValidator &amp;&amp; Validators.required),\r\n    email: new FormControl('', Validators.nullValidator &amp;&amp; Validators.required)\r\n  });\r\n\r\n  users: any&#91;] = &#91;];\r\n  userCount = 0;\r\n\r\n  destroy$: Subject&lt;boolean> = new Subject&lt;boolean>();\r\n\r\n  onSubmit() {\r\n    this.appService.addUser(this.userForm.value, this.userCount + 1).pipe(takeUntil(this.destroy$)).subscribe(data => {\r\n      console.log('message::::', data);\r\n      this.userCount = this.userCount + 1;\r\n      console.log(this.userCount);\r\n      this.userForm.reset();\r\n    });\r\n  }\r\n\r\n  getAllUsers() {\r\n    this.appService.getUsers().pipe(takeUntil(this.destroy$)).subscribe((users: any&#91;]) => {\r\n\t\tthis.userCount = users.length;\r\n        this.users = users;\r\n    });\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.destroy$.next(true);\r\n    this.destroy$.unsubscribe();\r\n  }\r\n\r\n  ngOnInit() {\r\n\tthis.getAllUsers();\r\n  }\r\n}import { Component, OnDestroy } from '@angular\/core';\r\nimport { FormGroup, FormControl, Validators } from '@angular\/forms';\r\nimport { AppService } from '.\/app.service';\r\nimport { takeUntil } from 'rxjs\/operators';\r\nimport { Subject } from 'rxjs';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: &#91;'.\/app.component.css']\r\n})\r\nexport class AppComponent implements OnDestroy {\r\n\r\n  constructor(private appService: AppService) {}\r\n\r\n  title = 'angular-nodejs-example';\r\n\r\n  userForm = new FormGroup({\r\n    firstName: new FormControl('', Validators.nullValidator &amp;&amp; Validators.required),\r\n    lastName: new FormControl('', Validators.nullValidator &amp;&amp; Validators.required),\r\n    email: new FormControl('', Validators.nullValidator &amp;&amp; Validators.required)\r\n  });\r\n\r\n  users: any&#91;] = &#91;];\r\n  userCount = 0;\r\n\r\n  destroy$: Subject&lt;boolean> = new Subject&lt;boolean>();\r\n\r\n  onSubmit() {\r\n    this.appService.addUser(this.userForm.value, this.userCount + 1).pipe(takeUntil(this.destroy$)).subscribe(data => {\r\n      console.log('message::::', data);\r\n      this.userCount = this.userCount + 1;\r\n      console.log(this.userCount);\r\n      this.userForm.reset();\r\n    });\r\n  }\r\n\r\n  getAllUsers() {\r\n    this.appService.getUsers().pipe(takeUntil(this.destroy$)).subscribe((users: any&#91;]) => {\r\n\t\tthis.userCount = users.length;\r\n        this.users = users;\r\n    });\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.destroy$.next(true);\r\n    this.destroy$.unsubscribe();\r\n  }\r\n\r\n  ngOnInit() {\r\n\tthis.getAllUsers();\r\n  }\r\n}<\/code><\/pre>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-purple-color\">Interaction between Angular and Java API<\/span><\/h4>\n\n\n\n<p>In the development phase, the Angular app is running on port\u00a0<strong>4200<\/strong>\u00a0with the help of a webpack dev server and Java API running on port\u00a0<strong>8080<\/strong>.<\/p>\n\n\n\n<p>There should be some interaction between these two. We can proxy all the API calls to Java API. Angular provides an inbuilt proxying method. First, we need to define the following\u00a0<strong>proxy.conf.json<\/strong>\u00a0under\u00a0<strong>src\/main\/ui<\/strong>\u00a0folder.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/proxy.conf.json\n\n{\r\n  \"\/api\": {\r\n    \"target\": \"http:\/\/localhost:8080\",\r\n    \"secure\": false\r\n  }\r\n}<\/code><\/pre>\n\n\n\n<p>If you look at the file, all the paths that start with\u00a0<strong>\/api\u00a0<\/strong>will be redirected to <a rel=\"noreferrer noopener\" href=\"http:\/\/localhost:3080.\/\" target=\"_blank\"><strong>http:\/\/localhost:8080<\/strong><\/a> where the Java API running. Then, you need to define in angular.json under the serve part with the proxyConfig key<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"595\" height=\"242\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-17.png\" alt=\"\" class=\"wp-image-2205\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-17.png 595w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-17-300x122.png 300w\" sizes=\"(max-width: 595px) 100vw, 595px\" \/><\/figure><\/div>\n\n\n\n<p>Once this is configured, you can run the Angular app on port\u00a0<strong>4200<\/strong>\u00a0and java API on\u00a0<strong>8080<\/strong>\u00a0still make them work together.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ java API (Terminal 1)\r\nmvn clean install\r\njava -jar target\/&lt;war file name>\r\n\/\/ Angular app (Terminal 2)\r\nnpm start<\/code><\/pre>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4><strong><em><span class=\"has-inline-color has-vivid-cyan-blue-color\">How To Build For Production<\/span><\/em><\/strong><\/h4>\n\n\n\n<p>As you have seen above, we run the Angular and Java server on different ports in the development phase. But in the production,  you need to pack your Angular code with Java and run it on one port.  It means, we package the whole application into a war file and deploy that on the tomcat container which usually runs on the port\u00a0<strong>8080.<\/strong><\/p>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-cyan-blue-color\">Project Structure<\/span><\/h4>\n\n\n\n<p>We need to have two completely different folders for java and angular. It\u2019s always best practice to have completely different folders for each one. In this way, you will have a clean architecture or any other problems regarding merging any files.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-18.png\" alt=\"\" class=\"wp-image-2206\" width=\"498\" height=\"243\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-18.png 588w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-18-300x146.png 300w\" sizes=\"(max-width: 498px) 100vw, 498px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" src=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-19.png\" alt=\"\" class=\"wp-image-2207\" width=\"582\" height=\"405\" srcset=\"https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-19.png 637w, https:\/\/nguenkam.com\/blog\/wp-content\/uploads\/2022\/09\/image-19-300x209.png 300w\" sizes=\"(max-width: 582px) 100vw, 582px\" \/><\/figure><\/div>\n\n\n\n<p>The only thing that is different between development and production phases is that all the compilation Angular code goes to this folder\u00a0<strong><em>\/src\/main\/resources\/static. <\/em><\/strong><\/p>\n\n\n\n<h5>\u00a0\u00a0<strong>\u00a0How to make Spring Boot run the Angular application?<\/strong><\/h5>\n\n\n\n<p>We should change the \u201coutputPath\u201d attribute\u2019s value to the \u201c..\/src\/main\/resources\/static\u201d so that the generated bundles will be dropped into the Spring Boot\u2019s resources\/static folder.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Angular.json\n\n{\r\n  \"$schema\": \".\/node_modules\/@angular\/cli\/lib\/config\/schema.json\",\r\n  \"version\": 1,\r\n  \"newProjectRoot\": \"projects\",\r\n  \"projects\": {\r\n    \"application-frontend\": {\r\n      \"projectType\": \"application\",\r\n      \"schematics\": {},\r\n      \"root\": \"\",\r\n      \"sourceRoot\": \"src\",\r\n      \"prefix\": \"app\",\r\n      \"architect\": {\r\n        \"build\": {\r\n          \"builder\": \"@angular-devkit\/build-angular:browser\",\r\n          \"options\": {\r\n           <strong> \"outputPath\": \"..\/src\/main\/resources\/static\",<\/strong>\r\n            \"index\": \"src\/index.html\",\r\n            \"main\": \"src\/main.ts\",\r\n            \"polyfills\": \"src\/polyfills.ts\",\r\n            \"tsConfig\": \"tsconfig.app.json\",\r\n            \"aot\": true,\r\n            \"assets\": &#91;\r\n              \"src\/favicon.ico\",\r\n              \"src\/assets\"<\/code><\/pre>\n\n\n\n<p>Now we need a maven plugin to compile the Angular code as part of the build process. We have a plugin called\u00a0<strong>frontend-maven-plugin\u00a0<\/strong>that can be used to compile all the Angular source code.\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/eirslett\/frontend-maven-plugin\" target=\"_blank\">Here is the link to know more about this plugin.<\/a><\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h5>Reference:<\/h5>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/medium.com\/bb-tutorials-and-thoughts\/how-to-develop-and-build-angular-app-with-java-backend-87fb603c6e17\" target=\"_blank\">https:\/\/medium.com\/bb-tutorials-and-thoughts\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular is a javascript framework for building web apps and it doesn\u2019t load itself in the browser. We need some kind of mechanism that loads the index.html (single page) of Angular with all the dependencies(CSS and js files) in the browser. There are many ways we can build the apps and ship for production. One [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2209,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37,554,104],"tags":[52,555,154],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1940"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1940"}],"version-history":[{"count":2,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1940\/revisions"}],"predecessor-version":[{"id":2210,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1940\/revisions\/2210"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/2209"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1940"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1940"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1940"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}