Upgrade Angular and fix

Front/skydivelogs-app/.gitignore

@@ -42,3 +42,5 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+.angular

Front/skydivelogs-app/package.json

@@ -12,48 +12,33 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^12.1.4",
+    "@angular/animations": "^15.2.0",
-    "@angular/cdk": "^12.1.4",
+    "@angular/cdk": "^15.2.6",
-    "@angular/common": "^12.1.4",
+    "@angular/common": "^15.2.0",
-    "@angular/compiler": "^12.1.4",
+    "@angular/compiler": "^15.2.0",
-    "@angular/core": "^12.1.4",
+    "@angular/core": "^15.2.0",
-    "@angular/forms": "^12.1.4",
+    "@angular/forms": "^15.2.0",
-    "@angular/material": "^12.1.4",
+    "@angular/material": "^15.2.6",
-    "@angular/platform-browser": "^12.1.4",
+    "@angular/platform-browser": "^15.2.0",
-    "@angular/platform-browser-dynamic": "^12.1.4",
+    "@angular/platform-browser-dynamic": "^15.2.0",
-    "@angular/router": "^12.1.4",
+    "@angular/router": "^15.2.0",
-    "@ngx-translate/core": "^13.0.0",
+    "@ngx-translate/core": "^14.0.0",
-    "@ngx-translate/http-loader": "^6.0.0",
+    "@ngx-translate/http-loader": "^7.0.0",
-    "bufferutil": "^4.0.3",
+    "rxjs": "~7.8.0",
-    "core-js": "^2.6.12",
+    "tslib": "^2.3.0",
-    "fibers": "^5.0.0",
+    "zone.js": "~0.12.0"
-    "html-webpack-plugin": "^4.5.2",
-    "rxjs": "^6.6.7",
-    "rxjs-compat": "^6.6.7",
-    "sass": "^1.34.0",
-    "tslib": "^2.2.0",
-    "utf-8-validate": "^5.0.5",
-    "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^12.0.2",
+    "@angular-devkit/build-angular": "^15.2.6",
-    "@angular/cli": "^12.1.4",
+    "@angular/cli": "~15.2.6",
-    "@angular/compiler-cli": "^12.1.4",
+    "@angular/compiler-cli": "^15.2.0",
-    "@angular/language-service": "^12.1.4",
+    "@types/jasmine": "~4.3.0",
-    "@types/jasmine": "^3.6.11",
+    "jasmine-core": "~4.5.0",
-    "@types/jasminewd2": "^2.0.9",
+    "karma": "~6.4.0",
-    "@types/node": "^12.20.13",
-    "codelyzer": "^6.0.2",
-    "jasmine-core": "~3.6.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "^6.3.2",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~4.0.0",
+    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "^1.6.0",
+    "karma-jasmine-html-reporter": "~2.0.0",
-    "protractor": "^7.0.0",
+    "typescript": "~4.9.4"
-    "ts-node": "~4.1.0",
-    "tslint": "~6.1.3",
-    "typescript": "~4.2.4"
   }
 }

Front/skydivelogs-app/src/app/app.module.ts

@@ -148,7 +148,8 @@ export function initConfig(configService: ConfigurationHelper) {
   imports: [
     RouterModule.forRoot(
       appRoutes,
-      { enableTracing: !environment.production, relativeLinkResolution: 'legacy' } // <-- debugging purposes only
+      { enableTracing: !environment.production } // <-- debugging purposes only
+      // { enableTracing: !environment.production, relativeLinkResolution: 'legacy' } // <-- debugging purposes only
     ),
     TranslateModule.forRoot({
       loader: {

Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts

@@ -6,7 +6,7 @@ import { trigger,state, style } from '@angular/animations';
 
 import { ImageService } from '../../services/image.service';
 import { ServiceComm } from '../../services/service-comm.service';
-import { ImageResp } from '../../models/Image';
+import { ImageResp } from '../../models/image';
 import { AddAction } from '../../models/add-action.enum';
 
 @Component({

Front/skydivelogs-app/src/assets/css/custom-theme-dark.scss

@@ -3,8 +3,8 @@
 * https://materialtheme.arcsine.dev
 */
 
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
-@import '~@angular/material/theming';
+@import '@angular/material/theming';
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 
@@ -30,6 +30,10 @@ $fontConfig: (
   input: mat.define-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px)
 );
 
+// Compute font config
+@include mat.core();
+
+
 // Foreground Elements
 
 // Light Theme Text
@@ -144,9 +148,6 @@ mat.$dark-theme-background-palette: (
   disabled-list-option:     $dark-bg-lighter-10,
 );
 
-// Compute font config
-@include mat.core($fontConfig);
-
 // Theme Config
 
 body {

Front/skydivelogs-app/src/assets/css/custom-theme-light.scss

@@ -3,8 +3,8 @@
 * https://materialtheme.arcsine.dev
 */
 
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;
-@import '~@angular/material/theming';
+@import '@angular/material/theming';
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 

Front/skydivelogs-app/src/services/image.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 
-import { ImageResp, ImageReq } from '../models/Image';
+import { ImageResp, ImageReq } from '../models/image';
 
 import { BaseService } from './base.service';
 

Front/skydivelogs-app/src/services/service-cache-api.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
+import { Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { CacheApiKey } from '../models/cache-api-key.enum';
 import { of } from 'rxjs';