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/product/product-detail/product-detail.component.ts

@@ -1,12 +1,13 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { ToasterService } from '../../core/toaster.service';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ProductService } from '../product.service';
+
 import { Product } from '../../core/product';
 import { ProductGroup } from '../../core/product-group';
+import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
-import { MatDialog } from '@angular/material/dialog';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { ProductService } from '../product.service';
 
 @Component({
   selector: 'app-product-detail',
@@ -80,7 +81,7 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
 
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe(
-      (result) => {
+      () => {
         this.toaster.show('Success', '');
         this.router.navigateByUrl('/products');
       },
@@ -92,7 +93,7 @@ export class ProductDetailComponent implements OnInit, AfterViewInit {
 
   delete() {
     this.ser.delete(this.item.id).subscribe(
-      (result) => {
+      () => {
         this.toaster.show('Success', '');
         this.router.navigateByUrl('/products');
       },

overlord/src/app/product/product-list-resolver.service.ts

@@ -1,7 +1,9 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Product } from '../core/product';
+import { Resolve } from '@angular/router';
 import { Observable } from 'rxjs/internal/Observable';
+
+import { Product } from '../core/product';
+
 import { ProductService } from './product.service';
 
 @Injectable({
@@ -10,7 +12,7 @@ import { ProductService } from './product.service';
 export class ProductListResolver implements Resolve<Product[]> {
   constructor(private ser: ProductService) {}
 
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Product[]> {
+  resolve(): Observable<Product[]> {
     return this.ser.list();
   }
 }

overlord/src/app/product/product-list/product-list-datasource.ts

@@ -1,10 +1,16 @@
 import { DataSource } from '@angular/cdk/collections';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import { map, tap } from 'rxjs/operators';
 import { merge, Observable, of as observableOf } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+
 import { Product } from '../../core/product';
 
+/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
+function compare(a, b, isAsc) {
+  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+}
+
 export class ProductListDataSource extends DataSource<Product> {
   private filterValue: string;
 
@@ -15,7 +21,11 @@ export class ProductListDataSource extends DataSource<Product> {
     public data: Product[],
   ) {
     super();
-    this.filter = filter.pipe(tap((x) => (this.filterValue = x)));
+    this.filter = filter.pipe(
+      tap((x) => {
+        this.filterValue = x;
+      }),
+    );
   }
 
   connect(): Observable<Product[]> {
@@ -28,39 +38,28 @@ export class ProductListDataSource extends DataSource<Product> {
 
     return merge(...dataMutations)
       .pipe(
-        map((x: any) => {
-          return this.getFilteredData([...this.data]);
+        map(() => this.getFilteredData([...this.data])),
+        tap((x: Product[]) => {
+          this.paginator.length = x.length;
         }),
-        tap((x: Product[]) => (this.paginator.length = x.length)),
       )
-      .pipe(
-        map((x: any) => {
-          return this.getPagedData(this.getSortedData(x));
-        }),
-      );
+      .pipe(map((x: any) => this.getPagedData(this.getSortedData(x))));
   }
 
   disconnect() {}
 
   private getFilteredData(data: Product[]): Product[] {
     const filter = this.filterValue === undefined ? '' : this.filterValue;
-    return filter.split(' ').reduce((p: Product[], c: string) => {
-      return p.filter((x) => {
-        const productString = (
-          x.code +
-          ' ' +
-          x.name +
-          ' ' +
-          x.units +
-          ' ' +
-          x.productGroup +
-          (x.isPurchased ? ' purchased' : ' made') +
-          (x.isSold ? 'sold' : 'used') +
-          (x.isActive ? 'active' : 'deactive')
-        ).toLowerCase();
-        return productString.indexOf(c) !== -1;
-      });
-    }, Object.assign([], data));
+    return filter.split(' ').reduce(
+      (p: Product[], c: string) =>
+        p.filter((x) => {
+          const productString = `${x.code} ${x.name} ${x.units} ${x.productGroup}${
+            x.isPurchased ? ' purchased' : ' made'
+          }${x.isSold ? 'sold' : 'used'}${x.isActive ? 'active' : 'deactive'}`.toLowerCase();
+          return productString.indexOf(c) !== -1;
+        }),
+      Object.assign([], data),
+    );
   }
 
   private getPagedData(data: Product[]) {
@@ -88,8 +87,3 @@ export class ProductListDataSource extends DataSource<Product> {
     });
   }
 }
-
-/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
-function compare(a, b, isAsc) {
-  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-}

overlord/src/app/product/product-list/product-list.component.ts

@@ -1,38 +1,22 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import { ProductListDataSource } from './product-list-datasource';
-import { Product } from '../../core/product';
 import { ActivatedRoute } from '@angular/router';
-import { debounceTime, distinctUntilChanged, startWith } from 'rxjs/operators';
-import { FormBuilder, FormGroup } from '@angular/forms';
 import { Observable } from 'rxjs';
+import { debounceTime, distinctUntilChanged, startWith } from 'rxjs/operators';
+
+import { Product } from '../../core/product';
 import { ToCsvService } from '../../shared/to-csv.service';
 
+import { ProductListDataSource } from './product-list-datasource';
+
 @Component({
   selector: 'app-product-list',
   templateUrl: './product-list.component.html',
   styleUrls: ['./product-list.component.css'],
 })
 export class ProductListComponent implements OnInit, AfterViewInit {
-  constructor(private route: ActivatedRoute, private fb: FormBuilder, private toCsv: ToCsvService) {
-    this.showExtended = false;
-    this.createForm();
-    this.filter = this.listenToFilterChange();
-  }
-
-  get showExtended(): boolean {
-    return this._showExtended;
-  }
-
-  set showExtended(value: boolean) {
-    this._showExtended = value;
-    if (value) {
-      this.displayedColumns = ['name', 'costPrice', 'productYield', 'productGroup', 'info'];
-    } else {
-      this.displayedColumns = ['name', 'costPrice', 'productGroup', 'info'];
-    }
-  }
   @ViewChild('filterElement', { static: true }) filterElement: ElementRef;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild(MatSort, { static: true }) sort: MatSort;
@@ -43,8 +27,30 @@ export class ProductListComponent implements OnInit, AfterViewInit {
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns: string[];
 
+  // eslint-disable-next-line no-underscore-dangle
   private _showExtended: boolean;
 
+  constructor(private route: ActivatedRoute, private fb: FormBuilder, private toCsv: ToCsvService) {
+    this.showExtended = false;
+    this.createForm();
+    this.filter = this.listenToFilterChange();
+  }
+
+  get showExtended(): boolean {
+    // eslint-disable-next-line no-underscore-dangle
+    return this._showExtended;
+  }
+
+  set showExtended(value: boolean) {
+    // eslint-disable-next-line no-underscore-dangle
+    this._showExtended = value;
+    if (value) {
+      this.displayedColumns = ['name', 'costPrice', 'productYield', 'productGroup', 'info'];
+    } else {
+      this.displayedColumns = ['name', 'costPrice', 'productGroup', 'info'];
+    }
+  }
+
   createForm() {
     this.form = this.fb.group({
       filter: '',

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

@@ -1,16 +1,18 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
-import { ProductService } from './product.service';
-import { Product } from '../core/product';
+import { ActivatedRouteSnapshot, Resolve, Router } from '@angular/router';
 import { Observable } from 'rxjs/internal/Observable';
 
+import { Product } from '../core/product';
+
+import { ProductService } from './product.service';
+
 @Injectable({
   providedIn: 'root',
 })
 export class ProductResolver implements Resolve<Product> {
   constructor(private ser: ProductService, private router: Router) {}
 
-  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Product> {
+  resolve(route: ActivatedRouteSnapshot): Observable<Product> {
     const id = route.paramMap.get('id');
     return this.ser.get(id);
   }

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

@@ -1,15 +1,15 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { ProductListResolver } from './product-list-resolver.service';
-import { ProductResolver } from './product-resolver.service';
-import { ProductDetailComponent } from './product-detail/product-detail.component';
-import { ProductListComponent } from './product-list/product-list.component';
-
 import { AuthGuard } from '../auth/auth-guard.service';
 import { ProductGroupListResolver } from '../product-group/product-group-list-resolver.service';
 
+import { ProductDetailComponent } from './product-detail/product-detail.component';
+import { ProductListResolver } from './product-list-resolver.service';
+import { ProductListComponent } from './product-list/product-list.component';
+import { ProductResolver } from './product-resolver.service';
+
 const productRoutes: Routes = [
   {
     path: '',

overlord/src/app/product/product.module.ts

@@ -1,9 +1,8 @@
-import { NgModule } from '@angular/core';
+import { CdkTableModule } from '@angular/cdk/table';
 import { CommonModule } from '@angular/common';
-
-import { ProductListComponent } from './product-list/product-list.component';
-import { ProductDetailComponent } from './product-detail/product-detail.component';
-import { ProductRoutingModule } from './product-routing.module';
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -15,9 +14,10 @@ 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 { CdkTableModule } from '@angular/cdk/table';
-import { ReactiveFormsModule } from '@angular/forms';
-import { FlexLayoutModule } from '@angular/flex-layout';
+
+import { ProductDetailComponent } from './product-detail/product-detail.component';
+import { ProductListComponent } from './product-list/product-list.component';
+import { ProductRoutingModule } from './product-routing.module';
 
 @NgModule({
   imports: [

overlord/src/app/product/product.service.ts

@@ -1,9 +1,10 @@
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-import { Product } from '../core/product';
+
 import { ErrorLoggerService } from '../core/error-logger.service';
+import { Product } from '../core/product';
 
 const httpOptions = {
   headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
@@ -52,9 +53,8 @@ export class ProductService {
   saveOrUpdate(product: Product): Observable<Product> {
     if (!product.id) {
       return this.save(product);
-    } else {
-      return this.update(product);
     }
+    return this.update(product);
   }
 
   delete(id: string): Observable<Product> {