📘 Premium Read: Access my best content on Medium member-only articles — deep dives into Java, Spring Boot, Microservices, backend architecture, interview preparation, career advice, and industry-standard best practices.
✅ Some premium posts are free to read — no account needed. Follow me on Medium to stay updated and support my writing.
🎓 Top 10 Udemy Courses (Huge Discount): Explore My Udemy Courses — Learn through real-time, project-based development.
▶️ Subscribe to My YouTube Channel (172K+ subscribers): Java Guides on YouTube
Use below links to visit different parts of this tutorial:
- Spring Boot + Angular 9 CRUD Example Tutorial - Main Tutorial
- Spring Boot + Angular 9 CRUD Tutorial - Part 1 - Develop Spring Boot CRUD Rest APIs
- Spring Boot + Angular 9 CRUD - Part 2 - Create an Angular 9 App
- Spring Boot + Angular 9 CRUD - Part 3 - Develop Angular 9 CRUD Operations
- Spring Boot + Angular 9 CRUD, Part 4 - Angular 9 CRUD App Configuration
- Spring Boot 2 + Angular 9 CRUD, Part 5 - Running Angular 9 CRUD App
Table of contents
- npm package.json - Configure Dependencies
- App Routing Module
- App Component
- App Component Template
- App Module
- Main Index Html File
- Main (Bootstrap) File
- Polyfills
- TypeScript tsconfig.json
npm package.json - Configure Dependencies
{ "name": "angular9-springboot-client", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~9.0.0-rc.7", "@angular/common": "~9.0.0-rc.7", "@angular/compiler": "~9.0.0-rc.7", "@angular/core": "~9.0.0-rc.7", "@angular/forms": "~9.0.0-rc.7", "@angular/platform-browser": "~9.0.0-rc.7", "@angular/platform-browser-dynamic": "~9.0.0-rc.7", "@angular/router": "~9.0.0-rc.7", "bootstrap": "^4.4.1", "jquery": "^3.4.1", "rxjs": "~6.5.3", "tslib": "^1.10.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.900.0-rc.7", "@angular/cli": "~9.0.0-rc.7", "@angular/compiler-cli": "~9.0.0-rc.7", "@angular/language-service": "~9.0.0-rc.7", "@types/node": "^12.11.1", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", "codelyzer": "^5.1.2", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~2.1.0", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.2", "protractor": "~5.4.2", "ts-node": "~8.3.0", "tslint": "~5.18.0", "typescript": "~3.6.4" } }
App Routing Module
import { EmployeeDetailsComponent } from './employee-details/employee-details.component'; import { CreateEmployeeComponent } from './create-employee/create-employee.component'; import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { EmployeeListComponent } from './employee-list/employee-list.component'; import { UpdateEmployeeComponent } from './update-employee/update-employee.component'; const routes: Routes = [ { path: '', redirectTo: 'employee', pathMatch: 'full' }, { path: 'employees', component: EmployeeListComponent }, { path: 'add', component: CreateEmployeeComponent }, { path: 'update/:id', component: UpdateEmployeeComponent }, { path: 'details/:id', component: EmployeeDetailsComponent }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
App Component
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular 9 + Spring Boot 2 CRUD Tutorial';
}
App Component Template
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a routerLink="employees" class="nav-link" routerLinkActive="active">Employee List</a>
</li>
<li class="nav-item">
<a routerLink="add" class="nav-link" routerLinkActive="active">Add Employee</a>
</li>
</ul>
</nav>
<div class="container">
<br>
<h2 style="text-align: center;">{{title}}</h2>
<hr>
<div class="card">
<div class="card-body">
<router-outlet></router-outlet>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<span>All Rights Reserved 2019 @JavaGuides</span>
</div>
</footer>
App Module
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { CreateEmployeeComponent } from './create-employee/create-employee.component'; import { EmployeeDetailsComponent } from './employee-details/employee-details.component'; import { EmployeeListComponent } from './employee-list/employee-list.component'; import { HttpClientModule } from '@angular/common/http'; import { UpdateEmployeeComponent } from './update-employee/update-employee.component'; @NgModule({ declarations: [ AppComponent, CreateEmployeeComponent, EmployeeDetailsComponent, EmployeeListComponent, UpdateEmployeeComponent ], imports: [ BrowserModule, AppRoutingModule, FormsModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Main Index Html File
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular9SpringbootClient</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
Main (Bootstrap) File
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
Polyfills
import 'core-js/features/reflect';
import 'zone.js/dist/zone';
TypeScript tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}
Got the following errors after running "ng serve": ERROR in HostResourceResolver: could not resolve ./create-employee.component.css in context of C:/Users/Greg/Projects/Spring-Boot-Demos/springboot2-jpa-crud-example/angular9-springboot-client/src/app/create-employee/create-employee.component.ts)
ReplyDelete** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2020-08-05T21:17:03.358Z - Hash: 75b9621fdc986ac594b2
5 unchanged chunks
Time: 364ms
ERROR in HostResourceResolver: could not resolve ./create-employee.component.css in context of C:/Users/Greg/Projects/Spring-Boot-Demos/springboot2-jpa-crud-example/angular9-springboot-client/src/app/create-employee/create-employee.component.ts)
ERROR in src/app/employee-details/employee-details.component.ts:4:39 - error TS2307: Cannot find module '../employee-list/employee-list.component'.
4 import { EmployeeListComponent } from '../employee-list/employee-list.component';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/app.module.ts:4:34 - error TS2307: Cannot find module './app-routing.module'.