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.

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