Spring Boot + Angular 9 CRUD - Part 5 - Running Angular 9 CRUD App

Author:
In the previous four parts, we have developed a complete step by step Angular 9 CRUD application with Spring boot as a back end.

Use below links to visit different parts of this tutorial:
  1. Spring Boot + Angular 9 CRUD Example Tutorial - Main Tutorial
  2. Spring Boot + Angular 9 CRUD Tutorial - Part 1 - Develop Spring Boot CRUD Rest APIs
  3. Spring Boot + Angular 9 CRUD - Part 2 - Create an Angular 9 App
  4. Spring Boot + Angular 9 CRUD - Part 3 - Develop Angular 9 CRUD Operations
  5. Spring Boot  + Angular 9 CRUD, Part 4 - Angular 9 CRUD App Configuration
  6. Spring Boot 2 + Angular 9 CRUD, Part 5 - Running Angular 9 CRUD App
In this final Part 5 of Spring Boot + Angular 9 CRUD Example Tutorial, we will run an Angular 9 CRUD App.

Running Angular 9 Client Application

Let's run the above developed Angular App with a command:
ng serve
By default, the Angular app runs on 4200 port but you can change default port with the following command:
ng serve --port 4201

Demo


Hit http://localhost:4200 link in a browser will host this Angular 9 CRUD app.

Below are the screenshots shows UI of our Employee Management System App:

Employee List Page

Add Employee Page

Update Employee Page

View Employee Details Page

Delete Employee


 This completed the complete development of Angular 9 CRUD application with spring boot as a back end.

Source Code on my GitHub repository

Download source code of this tutorial from my GitHub repository at https://github.com/RameshMF/Angular9-SpringBoot-CRUD-Tutorial
Leave a comment if you have any suggestions about this awesome tutorial.

Related Spring and Spring Boot Tutorials/Guides:

Spring Boot Tutorials [500+] Spring Boot Testing Tutorial Spring Boot Microservice Tutorial Spring Boot Kafka Microservices Spring Boot + Apache Kafka Tutorial Spring Core Tutorial Spring MVC Tutorial Spring Data JPA Tutorial Spring Framework for Beginners Spring AOP Tutorial Spring Security Tutorial Spring Exceptions Tutorial Spring Boot Interview Questions Spring Boot Microservices Interview Questions Apache Kafka Tutorials Docker Tutorials and Guides Spring Boot RabbitMQ Tutorials Angular CRUD Example with Spring Boot Spring Boot + Angular 12 CRUD Full Stack Spring Boot + Angular 8 CRUD Full Stack Spring Boot + Angular 10 CRUD Full Stack Spring Boot + React JS CRUD Full Stack React JS ( React Hooks) + Spring Boot Spring Boot Thymeleaf CRUD Full Stack Spring Boot User Registration and Login Node Js + Express + MongoDB CRUD Vue JS + Spring Boot REST API Tutorial

Comments

  1. Tharun varshanth3 July 2020 at 00:26

    Good example for full stack

    ReplyDelete
  2. Unknown5 August 2020 at 15:29

    Nice tutorial but couldn't get it to run. I downloaded your code. The spring-boot portion started up ok but the client, with "ng serve" did not. Here is the error:
    C:\Users\Greg\Projects\Spring-Boot-Demos\Angular9-SpringBoot-CRUD-Tutorial-master\angular9-springboot-client>ng serve
    An unhandled exception occurred: Cannot find module '@angular-devkit/build-angular/package.json'
    Require stack:
    - C:\Users\Greg\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
    - C:\Users\Greg\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\architect\node\index.js
    - C:\Users\Greg\AppData\Roaming\npm\node_modules\@angular\cli\models\architect-command.js
    - C:\Users\Greg\AppData\Roaming\npm\node_modules\@angular\cli\commands\serve-impl.js
    - C:\Users\Greg\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\schematics\tools\export-ref.js
    - C:\Users\Greg\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\schematics\tools\index.js
    - C:\Users\Greg\AppData\Roaming\npm\node_modules\@angular\cli\utilities\json-schema.js
    - C:\Users\Greg\AppData\Roaming\npm\node_modules\@angular\cli\models\command-runner.js
    - C:\Users\Greg\AppData\Roaming\npm\node_modules\@angular\cli\lib\cli\index.js
    - C:\Users\Greg\AppData\Roaming\npm\node_modules\@angular\cli\lib\init.js
    - C:\Users\Greg\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng
    See "C:\Users\Greg\AppData\Local\Temp\ng-7uiy24\angular-errors.log" for further details.

    ReplyDelete
    Replies
    1. Ramesh Fadatare5 August 2020 at 21:28

      first install these packages using npm install commmad

      Delete
  3. Unknown13 November 2020 at 18:43

    Hi,

    i try your tutorial, but when i send request to get all employees i get :
    ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. Please help

    ReplyDelete

Post a Comment

Leave Comment