Merge pull request #16 from HideyoshiNakazone/updates-dependencies

- Adds ServiceWorker Service
- Updates Angular to v16

.browserslistrc

@@ -1,16 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
-Firefox ESR

.eslintrc.json

@@ -19,7 +19,10 @@
         "plugin:@angular-eslint/template/process-inline-templates"
       ],
       "rules": {
-        "indent": ["error", 4],
+        "indent": [
+          "error",
+          4
+        ],
         "@angular-eslint/directive-selector": [
           "error",
           {

Dockerfile

@@ -4,7 +4,7 @@ WORKDIR /app
 
 COPY . .
 RUN npm install
-RUN npm install -g @angular/cli@14.0.6
+RUN npm install -g @angular/cli@16
 
 
 EXPOSE 5000-7000

angular.json

@@ -133,5 +133,13 @@
       "@angular-eslint/schematics"
     ],
     "analytics": false
+  },
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
   }
 }

package.json

@@ -3,7 +3,10 @@
   "version": "0.0.0",
   "scripts": {
     "start": "node ./server.js",
-        "serve": "ng serve"
+    "build": "ng build",
+    "serve": "ng serve",
+    "serve:prod": "ng serve --configuration=production",
+    "build:prod": "ng build --configuration=production"
   },
   "proxy": {
     "/callback": {
@@ -12,18 +15,18 @@
   },
   "private": true,
   "dependencies": {
-        "@angular/animations": "^14.0.3",
+    "@angular/animations": "^16.2.2",
-        "@angular/cdk": "^14.2.6",
+    "@angular/cdk": "^16.2.1",
-        "@angular/common": "^14.2.9",
+    "@angular/common": "^16.2.2",
-        "@angular/compiler": "^14.0.0",
+    "@angular/compiler": "^16.2.2",
-        "@angular/core": "^14.2.9",
+    "@angular/core": "^16.2.2",
-        "@angular/forms": "^14.0.0",
+    "@angular/forms": "^16.2.2",
-        "@angular/material": "^14.2.6",
+    "@angular/material": "^16.2.1",
-        "@angular/platform-browser": "^14.0.0",
+    "@angular/platform-browser": "^16.2.2",
-        "@angular/platform-browser-dynamic": "^14.0.0",
+    "@angular/platform-browser-dynamic": "^16.2.2",
-        "@angular/router": "^14.0.0",
+    "@angular/router": "^16.2.2",
-        "@angular/service-worker": "^14.0.0",
+    "@angular/service-worker": "^16.2.2",
-        "@fortawesome/angular-fontawesome": "^0.11.1",
+    "@fortawesome/angular-fontawesome": "^0.13.0",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
@@ -36,23 +39,23 @@
     "rxjs": "~7.5.0",
     "ts-interface-checker": "^1.0.2",
     "tslib": "^2.3.0",
-        "zone.js": "~0.11.4"
+    "zone.js": "~0.13.1"
   },
   "devDependencies": {
-        "@angular-builders/custom-webpack": "^14.1.0",
+    "@angular-builders/custom-webpack": "^16.0.1",
-        "@angular-devkit/build-angular": "^14.0.3",
+    "@angular-devkit/build-angular": "^16.2.0",
-        "@angular-eslint/builder": "^14.4.0",
+    "@angular-eslint/builder": "^16.1.1",
-        "@angular-eslint/eslint-plugin": "14.0.0",
+    "@angular-eslint/eslint-plugin": "16.1.1",
-        "@angular-eslint/eslint-plugin-template": "14.0.0",
+    "@angular-eslint/eslint-plugin-template": "16.1.1",
-        "@angular-eslint/schematics": "14.0.0",
+    "@angular-eslint/schematics": "16.1.1",
-        "@angular-eslint/template-parser": "14.0.0",
+    "@angular-eslint/template-parser": "16.1.1",
-        "@angular/cli": "^14.2.12",
+    "@angular/cli": "^16.2.0",
-        "@angular/compiler-cli": "^14.0.0",
+    "@angular/compiler-cli": "^16.2.2",
     "@types/jasmine": "~4.0.0",
     "@types/node": "^18.11.19",
-        "@typescript-eslint/eslint-plugin": "5.29.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.2",
-        "@typescript-eslint/parser": "5.29.0",
+    "@typescript-eslint/parser": "^5.59.2",
-        "eslint": "^8.18.0",
+    "eslint": "^8.39.0",
     "jasmine-core": "~4.1.0",
     "karma": "~6.3.0",
     "karma-chrome-launcher": "~3.1.0",
@@ -60,6 +63,6 @@
     "karma-jasmine": "~5.0.0",
     "karma-jasmine-html-reporter": "~1.7.0",
     "ts-interface-builder": "^0.3.3",
-        "typescript": "~4.7.2"
+    "typescript": "~4.9.5"
   }
 }

src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { AuthService } from './shared/auth/auth.service';
+import {UpdateService} from "./shared/service-worker/update.service";
 
 @Component({
     selector: 'app-root',
@@ -10,7 +11,9 @@ export class AppComponent implements OnInit {
 
     title = 'frontend-hideyoshi.com';
 
-    constructor(private authService: AuthService) {}
+    constructor(private authService: AuthService, private serviceWorker: UpdateService) {
+        this.serviceWorker.checkForUpdates();
+    }
 
     ngOnInit(): void {
         this.authService.autoLogin();

src/app/shared/service-worker/update.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { UpdateService } from './update.service';
+
+describe('UpdateService', () => {
+  let service: UpdateService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(UpdateService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/service-worker/update.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import {SwUpdate} from "@angular/service-worker";
+import {interval} from "rxjs";
+
+@Injectable({
+    providedIn: 'root'
+})
+export class UpdateService {
+
+    constructor(private swUpdate: SwUpdate) {
+        if (swUpdate.isEnabled) {
+            interval(6 * 60 * 60).subscribe(() => swUpdate.checkForUpdate()
+                .then(() => console.log('checking for updates')));
+        }
+    }
+
+    public checkForUpdates(): void {
+        this.swUpdate.available.subscribe(event => this.promptUser());
+    }
+
+    private promptUser(): void {
+        console.log('updating to new version');
+        this.swUpdate.activateUpdate().then(() => document.location.reload());
+    }
+
+}

src/test.ts

@@ -7,20 +7,8 @@ import {
     platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    <T>(id: string): T;
-    keys(): string[];
-  };
-};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
     BrowserDynamicTestingModule,
     platformBrowserDynamicTesting(),
 );
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().forEach(context);

tsconfig.json

@@ -16,12 +16,13 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2020",
+    "target": "ES2022",
     "module": "es2020",
     "lib": [
       "es2020",
       "dom"
-    ]
+    ],
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
     "enableI18nLegacyMessageIdFormat": false,