Spring Boot + Angular 9 CRUD - Part 4 - Angular 9 CRUD App Configuration

---

Part 3 Part 5

Complete Tutorial

---

In the previous part 3, we have developed CRUD operations using Angular 9. In this part 4 of Spring Boot + Angular 9 CRUD Example Tutorial, we create an Angular 9 web application configuration, App component, App modules, App Routing, etc.

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

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

Path: /package.json 

The package.json file contains project configuration information including package dependencies which get installed when you run npm install.

Note that angular version ~9.0.0-rc.7 in the dependencies section in the below file.

{
  "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

Path: /src/app/app.routing.module.ts

Routing for the Angular app is configured as an array of Routes, each component is mapped to a path so the Angular Router knows which component to display based on the URL in the browser address bar.

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

Path: /src/app/app.component.ts

The app component is the root component of the application, it defines the root tag of the app as with the selector property of the @Component decorator.

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

Path: /src/app/app.component.html

Defines the HTML template associated with the root AppComponent.

<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

Path: /src/app/app.module.ts

Defines the root module, named AppModule, that tells Angular how to assemble the application. Initially declares only the AppComponent. As you add more components to the app, they must be declared here.

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

Path: /src/index.html

The main index.html file is the initial page loaded by the browser that kicks everything off. Webpack bundles all of the javascript files together and injects them into the body of the index.html page so the scripts get loaded and executed by the browser.

<!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

Path: /src/main.ts

The main file is the entry point used by angular to launch and bootstrap the application.

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

Path: /src/polyfills.ts

Some features used by Angular 8 are not yet supported natively by all major browsers, polyfills are used to add support for features where necessary so your Angular 8 application works across all major browsers.

import 'core-js/features/reflect';
import 'zone.js/dist/zone';

TypeScript tsconfig.json

Path: /tsconfig.json

The tsconfig.json file configures how the TypeScript compiler will convert TypeScript into JavaScript that is understood by the browser. More information is available on the TypeScript docs.

{
  "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"
    ]
  }
}

This completes the Angular 9 web application configuration and app-related components.

Move to Part 5 - Running Angular 9 CRUD App and Demo

In the next part 5, we will see how to run an Angular 9 web application and we will also see demo screenshots of the final development of this Employee Management System application.

---

Part 3 Part 5

Complete Tutorial

---