Prettied, Linted and updated angular.json according to the latest schematic of Angular CLI.

Now all that is needed is to make it ready for strict compiling.
Removed eslint-plugin-prettier as it is not recommended and causes errors for both eslint and prettier

Bumped to v8.0.0

overlord/src/app/attendance/attendance-datasource.ts

@@ -1,6 +1,7 @@
 import { DataSource } from '@angular/cdk/collections';
 import { Observable } from 'rxjs';
-import { AttendanceItem } from './attendance';
+
+import { AttendanceItem } from './attendance-item';
 
 export class AttendanceDataSource extends DataSource<AttendanceItem> {
   constructor(private data: Observable<AttendanceItem[]>) {

overlord/src/app/attendance/attendance-item.ts

@@ -0,0 +1,17 @@
+import { AttendanceType } from './attendance-type';
+
+export class AttendanceItem {
+  id: string;
+  code: number;
+  name: string;
+  designation: string;
+  department: string;
+  attendanceType: AttendanceType;
+  prints: string;
+  hoursWorked: string;
+  fullDay?: boolean;
+
+  public constructor(init?: Partial<AttendanceItem>) {
+    Object.assign(this, init);
+  }
+}

overlord/src/app/attendance/attendance-resolver.service.ts

@@ -1,8 +1,9 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot, Resolve } from '@angular/router';
 import { Observable } from 'rxjs/internal/Observable';
-import { AttendanceService } from './attendance.service';
+
 import { Attendance } from './attendance';
+import { AttendanceService } from './attendance.service';
 
 @Injectable({
   providedIn: 'root',
@@ -10,7 +11,7 @@ import { Attendance } from './attendance';
 export class AttendanceResolver implements Resolve<Attendance> {
   constructor(private ser: AttendanceService) {}
 
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Attendance> {
+  resolve(route: ActivatedRouteSnapshot): Observable<Attendance> {
     const date = route.paramMap.get('date');
     return this.ser.get(date);
   }

overlord/src/app/attendance/attendance-routing.module.ts

@@ -1,10 +1,12 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { AttendanceResolver } from './attendance-resolver.service';
+
 import { AuthGuard } from '../auth/auth-guard.service';
-import { AttendanceComponent } from './attendance.component';
+
+import { AttendanceResolver } from './attendance-resolver.service';
 import { AttendanceTypeResolver } from './attendance-type-resolver.service';
+import { AttendanceComponent } from './attendance.component';
 
 const attendanceRoutes: Routes = [
   {

overlord/src/app/attendance/attendance-type-resolver.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { Resolve } from '@angular/router';
 import { Observable } from 'rxjs/internal/Observable';
+
 import { AttendanceType } from './attendance-type';
 import { AttendanceTypeService } from './attendance-type.service';
 
@@ -10,7 +11,7 @@ import { AttendanceTypeService } from './attendance-type.service';
 export class AttendanceTypeResolver implements Resolve<AttendanceType[]> {
   constructor(private ser: AttendanceTypeService) {}
 
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<AttendanceType[]> {
+  resolve(): Observable<AttendanceType[]> {
     return this.ser.list();
   }
 }

overlord/src/app/attendance/attendance-type.service.ts

@@ -1,8 +1,10 @@
+import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
-import { HttpClient } from '@angular/common/http';
+
 import { ErrorLoggerService } from '../core/error-logger.service';
+
 import { AttendanceType } from './attendance-type';
 
 const url = '/api/attendance-types';

overlord/src/app/attendance/attendance.component.html

@@ -61,7 +61,7 @@
           <mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
           <mat-cell *matCellDef="let row; let i = index" class="no-bg">
             {{ row.prints }}
-            <mat-icon *ngIf="!form.controls.attendances.controls[i].pristine"
+            <mat-icon *ngIf="!$any(form.controls.attendances).controls[i].pristine"
               >new_releases</mat-icon
             >
             <mat-chip-list class="no-bg">

overlord/src/app/attendance/attendance.component.ts

@@ -2,14 +2,17 @@ import { Component, OnInit } from '@angular/core';
 import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import { BehaviorSubject } from 'rxjs';
-import { AttendanceDataSource } from './attendance-datasource';
 import * as moment from 'moment';
+import { BehaviorSubject } from 'rxjs';
+
 import { AuthService } from '../auth/auth.service';
 import { ToasterService } from '../core/toaster.service';
-import { AttendanceService } from './attendance.service';
+
+import { Attendance } from './attendance';
+import { AttendanceDataSource } from './attendance-datasource';
+import { AttendanceItem } from './attendance-item';
 import { AttendanceType } from './attendance-type';
-import { Attendance, AttendanceItem } from './attendance';
+import { AttendanceService } from './attendance.service';
 
 @Component({
   selector: 'app-attendance',
@@ -68,7 +71,7 @@ export class AttendanceComponent implements OnInit {
   getClass(index: number) {
     const array = this.form.get('attendances') as FormArray;
     const id = array.controls[index].value.attendanceType;
-    const name: string = this.attendanceTypes.filter((x) => x.id === id)[0].name;
+    const { name } = this.attendanceTypes.filter((x) => x.id === id)[0];
     return name.toLowerCase().replace(/(\s+\+\s+)|(\s+)/g, '-');
   }
 
@@ -79,7 +82,7 @@ export class AttendanceComponent implements OnInit {
 
   save() {
     this.ser.save(this.getAttendance()).subscribe(
-      (result) => {
+      () => {
         this.toaster.show('Success', '');
       },
       (error) => {

overlord/src/app/attendance/attendance.module.ts

@@ -1,5 +1,10 @@
-import { NgModule } from '@angular/core';
+import { A11yModule } from '@angular/cdk/a11y';
+import { CdkTableModule } from '@angular/cdk/table';
 import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MomentDateAdapter } from '@angular/material-moment-adapter';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -21,14 +26,11 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
+
 import { SharedModule } from '../shared/shared.module';
-import { ReactiveFormsModule } from '@angular/forms';
-import { CdkTableModule } from '@angular/cdk/table';
+
 import { AttendanceRoutingModule } from './attendance-routing.module';
 import { AttendanceComponent } from './attendance.component';
-import { MomentDateAdapter } from '@angular/material-moment-adapter';
-import { A11yModule } from '@angular/cdk/a11y';
-import { FlexLayoutModule } from '@angular/flex-layout';
 
 export const MY_FORMATS = {
   parse: {

overlord/src/app/attendance/attendance.service.ts

@@ -1,10 +1,12 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Attendance } from './attendance';
+
 import { ErrorLoggerService } from '../core/error-logger.service';
 
+import { Attendance } from './attendance';
+
 const httpOptions = {
   headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
 };

overlord/src/app/attendance/attendance.ts

@@ -1,4 +1,4 @@
-import { AttendanceType } from './attendance-type';
+import { AttendanceItem } from './attendance-item';
 
 export class Attendance {
   date: string;
@@ -8,19 +8,3 @@ export class Attendance {
     Object.assign(this, init);
   }
 }
-
-export class AttendanceItem {
-  id: string;
-  code: number;
-  name: string;
-  designation: string;
-  department: string;
-  attendanceType: AttendanceType;
-  prints: string;
-  hoursWorked: string;
-  fullDay?: boolean;
-
-  public constructor(init?: Partial<AttendanceItem>) {
-    Object.assign(this, init);
-  }
-}