Update angular (#2343)

* chore: update to Angular 15

* chore: update to Angular 16

* chore: update Taiga UI

frontend/package.json

@@ -30,29 +30,26 @@
     "build-config": "node build-config.js"
   },
   "dependencies": {
-    "@angular/animations": "^14.1.0",
+    "@angular/animations": "^16.1.4",
-    "@angular/common": "^14.1.0",
+    "@angular/common": "^16.1.4",
-    "@angular/compiler": "^14.1.0",
+    "@angular/compiler": "^16.1.4",
-    "@angular/core": "^14.1.0",
+    "@angular/core": "^16.1.4",
-    "@angular/forms": "^14.1.0",
+    "@angular/forms": "^16.1.4",
-    "@angular/platform-browser": "^14.1.0",
+    "@angular/platform-browser": "^16.1.4",
-    "@angular/platform-browser-dynamic": "^14.1.0",
+    "@angular/platform-browser-dynamic": "^16.1.4",
-    "@angular/pwa": "^14.1.0",
+    "@angular/pwa": "^16.1.4",
-    "@angular/router": "^14.1.0",
+    "@angular/router": "^16.1.4",
-    "@angular/service-worker": "^14.2.2",
+    "@angular/service-worker": "^16.1.4",
     "@ionic/angular": "^6.1.15",
-    "@maskito/angular": "^0.10.0",
-    "@maskito/core": "^0.10.0",
     "@materia-ui/ngx-monaco-editor": "^6.0.0",
     "@start9labs/argon2": "^0.1.0",
     "@start9labs/emver": "^0.1.5",
-    "@taiga-ui/addon-charts": "3.33.1",
+    "@taiga-ui/addon-charts": "3.36.0",
-    "@taiga-ui/cdk": "3.33.1",
+    "@taiga-ui/cdk": "3.36.0",
-    "@taiga-ui/core": "3.33.1",
+    "@taiga-ui/core": "3.36.0",
-    "@taiga-ui/icons": "3.33.1",
+    "@taiga-ui/icons": "3.36.0",
-    "@taiga-ui/kit": "3.33.1",
+    "@taiga-ui/kit": "3.36.0",
     "@tinkoff/ng-dompurify": "4.0.0",
-    "angular-svg-round-progressbar": "^9.0.0",
     "ansi-to-html": "^0.7.2",
     "base64-js": "^1.5.1",
     "cbor": "npm:@jprochazk/cbor@^0.4.9",
@@ -68,7 +65,7 @@
     "marked": "^4.0.0",
     "monaco-editor": "^0.33.0",
     "mustache": "^4.2.0",
-    "ng-qrcode": "^7.0.0",
+    "ng-qrcode": "^16.0.0",
     "node-jose": "^2.1.1",
     "patch-db-client": "file: ../../../patch-db/client",
     "pbkdf2": "^3.1.2",
@@ -78,13 +75,13 @@
     "ts-matches": "^5.2.1",
     "tslib": "^2.3.0",
     "uuid": "^8.3.2",
-    "zone.js": "^0.11.5"
+    "zone.js": "^0.13.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.1.0",
+    "@angular-devkit/build-angular": "^16.1.4",
-    "@angular/cli": "^14.1.0",
+    "@angular/cli": "^16.1.4",
-    "@angular/compiler-cli": "^14.1.0",
+    "@angular/compiler-cli": "^16.1.4",
-    "@angular/language-service": "^14.1.0",
+    "@angular/language-service": "^16.1.4",
     "@ionic/cli": "^6.19.0",
     "@types/cron": "^2.0.0",
     "@types/dompurify": "^2.3.3",
@@ -98,13 +95,13 @@
     "@types/uuid": "^8.3.1",
     "husky": "^4.3.8",
     "lint-staged": "^13.2.0",
-    "ng-packagr": "^14.1.0",
+    "ng-packagr": "^16.1.0",
     "node-html-parser": "^5.3.3",
     "prettier": "^2.6.1",
     "raw-loader": "^4.0.2",
     "ts-node": "^10.7.0",
     "tslint": "^6.1.3",
-    "typescript": "^4.8.4",
+    "typescript": "^5.1.6",
     "webpack-bundle-analyzer": "^4.8.0"
   },
   "husky": {

frontend/projects/shared/styles/global.scss

@@ -10,20 +10,20 @@
  */
 
 /* Core CSS required for Ionic components to work properly */
-@import "~@ionic/angular/css/core.css";
+@import '@ionic/angular/css/core.css';
 
 /* Basic CSS for apps built with Ionic */
-@import "~@ionic/angular/css/normalize.css";
+@import '@ionic/angular/css/normalize.css';
-@import "~@ionic/angular/css/structure.css";
+@import '@ionic/angular/css/structure.css';
-@import "~@ionic/angular/css/typography.css";
+@import '@ionic/angular/css/typography.css';
-@import '~@ionic/angular/css/display.css';
+@import '@ionic/angular/css/display.css';
 
 /* Optional CSS utils that can be commented out */
-@import "~@ionic/angular/css/padding.css";
+@import '@ionic/angular/css/padding.css';
-@import "~@ionic/angular/css/float-elements.css";
+@import '@ionic/angular/css/float-elements.css';
-@import "~@ionic/angular/css/text-alignment.css";
+@import '@ionic/angular/css/text-alignment.css';
-@import "~@ionic/angular/css/text-transformation.css";
+@import '@ionic/angular/css/text-transformation.css';
-@import "~@ionic/angular/css/flex-utils.css";
+@import '@ionic/angular/css/flex-utils.css';
 
 /* Import swiper styles for slides */
-@import '~swiper/scss';
+@import 'swiper/scss';

frontend/projects/ui/src/app/apps/ui/pages/updates/updates.module.ts

@@ -13,7 +13,7 @@ import {
   SharedPipesModule,
 } from '@start9labs/shared'
 import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
-import { RoundProgressModule } from 'angular-svg-round-progressbar'
+import { TuiProgressModule } from '@taiga-ui/kit'
 import { BadgeMenuComponentModule } from 'src/app/common/badge-menu-button/badge-menu.component.module'
 import { SkeletonListComponentModule } from 'src/app/common/skeleton-list/skeleton-list.component.module'
 import { UpdatesPage } from './updates.page'
@@ -37,12 +37,12 @@ const routes: Routes = [
     SharedPipesModule,
     SkeletonListComponentModule,
     MarkdownPipeModule,
-    RoundProgressModule,
     StoreIconComponentModule,
     EmverPipesModule,
     MimeTypePipeModule,
     SafeLinksModule,
     NgDompurifyModule,
+    TuiProgressModule,
   ],
 })
 export class UpdatesPageModule {}

frontend/projects/ui/src/app/apps/ui/pages/updates/updates.page.html

@@ -60,15 +60,12 @@
                     </p>
                   </ion-label>
                   <div slot="end" style="margin-left: 4px">
-                    <round-progress
+                    <tui-progress-circle
                       *ngIf="local.state === 'updating' else notUpdating"
-                      [current]="local['install-progress'] | installProgress"
+                      style="color: var(--tui-positive)"
                       [max]="100"
-                      [radius]="13"
+                      [value]="local['install-progress'] | installProgress"
-                      [stroke]="3"
+                    ></tui-progress-circle>
-                      [rounded]="true"
-                      color="var(--ion-color-primary)"
-                    ></round-progress>
                     <ng-template #notUpdating>
                       <ion-spinner
                         *ngIf="marketplaceService.updateQueue[pkg.manifest.id] else updateBtn"

frontend/projects/ui/src/app/guards/auth.guard.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core'
-import { CanActivate, Router, CanActivateChild, UrlTree } from '@angular/router'
+import { Router, UrlTree } from '@angular/router'
 import { map, Observable } from 'rxjs'
 import { AuthService } from '../services/auth.service'
 
 @Injectable({
   providedIn: 'root',
 })
-export class AuthGuard implements CanActivate, CanActivateChild {
+export class AuthGuard {
   constructor(
     private readonly authService: AuthService,
     private readonly router: Router,

frontend/projects/ui/src/app/guards/unauth.guard.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core'
-import { CanActivate, Router, UrlTree } from '@angular/router'
+import { Router, UrlTree } from '@angular/router'
 import { map, Observable } from 'rxjs'
 import { AuthService } from '../services/auth.service'
 
 @Injectable({
   providedIn: 'root',
 })
-export class UnauthGuard implements CanActivate {
+export class UnauthGuard {
   constructor(
     private readonly authService: AuthService,
     private readonly router: Router,