chore(admin-ui): Update to Angular v16

packages/admin-ui/.eslintrc.json

@@ -1,80 +1,93 @@
 {
-    "root": true,
-    "ignorePatterns": ["projects/**/*"],
-    "overrides": [
-        {
-            "files": ["*.ts"],
-            "parserOptions": {
-                "project": ["tsconfig.json"],
-                "createDefaultProgram": true
-            },
-            "extends": [
-                "plugin:@angular-eslint/ng-cli-compat",
-                "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
-                "plugin:@angular-eslint/template/process-inline-templates"
-            ],
-            "rules": {
-                "@angular-eslint/directive-selector": [
-                    "error",
-                    {
-                        "type": "attribute",
-                        "prefix": "vdr",
-                        "style": "camelCase"
-                    }
-                ],
-                "@angular-eslint/component-selector": [
-                    "error",
-                    {
-                        "type": "element",
-                        "prefix": "vdr",
-                        "style": "kebab-case"
-                    }
-                ],
-                "@angular-eslint/no-input-rename": "off",
-                "@typescript-eslint/array-type": [
-                    "error",
-                    {
-                        "default": "array-simple"
-                    }
-                ],
-                "@typescript-eslint/naming-convention": "off",
-                "@typescript-eslint/consistent-type-definitions": "off",
-                "@typescript-eslint/dot-notation": "off",
-                "@typescript-eslint/explicit-member-accessibility": [
-                    "off",
-                    {
-                        "accessibility": "explicit"
-                    }
-                ],
-                "@typescript-eslint/member-ordering": "off",
-                "@typescript-eslint/no-empty-function": "error",
-                "@typescript-eslint/no-empty-interface": "off",
-                "@typescript-eslint/no-floating-promises": "off",
-                "@typescript-eslint/no-var-requires": "error",
-                "arrow-parens": ["off", "always"],
-                "id-blacklist": "off",
-                "id-match": "off",
-                "import/order": "error",
-                "jsdoc/check-alignment": "off",
-                "jsdoc/newline-after-description": "off",
-                "max-len": [
-                    "error",
-                    {
-                        "code": 170
-                    }
-                ],
-                "no-empty": "error",
-                "no-underscore-dangle": "off",
-                "prefer-arrow/prefer-arrow-functions": "off"
-            }
-        },
-        {
-            "files": ["*.html"],
-            "extends": ["plugin:@angular-eslint/template/recommended"],
-            "rules": {
-              "@angular-eslint/template/no-negated-async": "off",
-              "@angular-eslint/template/eqeqeq": "off"
-            }
-        }
-    ]
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/ng-cli-compat",
+        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "vdr",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "vdr",
+            "style": "kebab-case"
+          }
+        ],
+        "@angular-eslint/no-input-rename": "off",
+        "@typescript-eslint/array-type": [
+          "error",
+          {
+            "default": "array-simple"
+          }
+        ],
+        "@typescript-eslint/naming-convention": "off",
+        "@typescript-eslint/consistent-type-definitions": "off",
+        "@typescript-eslint/dot-notation": "off",
+        "@typescript-eslint/explicit-member-accessibility": [
+          "off",
+          {
+            "accessibility": "explicit"
+          }
+        ],
+        "@typescript-eslint/member-ordering": "off",
+        "@typescript-eslint/no-empty-function": "error",
+        "@typescript-eslint/no-empty-interface": "off",
+        "@typescript-eslint/no-floating-promises": "off",
+        "@typescript-eslint/no-var-requires": "error",
+        "arrow-parens": [
+          "off",
+          "always"
+        ],
+        "id-blacklist": "off",
+        "id-match": "off",
+        "import/order": "error",
+        "jsdoc/check-alignment": "off",
+        "jsdoc/newline-after-description": "off",
+        "max-len": [
+          "error",
+          {
+            "code": 170
+          }
+        ],
+        "no-empty": "error",
+        "no-underscore-dangle": "off",
+        "prefer-arrow/prefer-arrow-functions": "off"
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {
+        "@angular-eslint/template/no-negated-async": "off",
+        "@angular-eslint/template/eqeqeq": "off"
+      }
+    }
+  ]
 }

packages/admin-ui/angular.json

@@ -2,7 +2,6 @@
   "$schema": "../../node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "projects",
-  "defaultProject": "vendure-admin",
   "projects": {
     "vendure-admin": {
       "root": "",

packages/admin-ui/package.json

@@ -20,15 +20,15 @@
         "directory": "package"
     },
     "dependencies": {
-        "@angular/animations": "^15.2.1",
-        "@angular/cdk": "^15.2.1",
-        "@angular/common": "^15.2.1",
-        "@angular/core": "^15.2.1",
-        "@angular/forms": "^15.2.1",
-        "@angular/language-service": "^15.2.1",
-        "@angular/platform-browser": "^15.2.1",
-        "@angular/platform-browser-dynamic": "^15.2.1",
-        "@angular/router": "^15.2.1",
+        "@angular/animations": "^16.0.3",
+        "@angular/cdk": "^16.0.2",
+        "@angular/common": "^16.0.3",
+        "@angular/core": "^16.0.3",
+        "@angular/forms": "^16.0.3",
+        "@angular/language-service": "^16.0.3",
+        "@angular/platform-browser": "^16.0.3",
+        "@angular/platform-browser-dynamic": "^16.0.3",
+        "@angular/router": "^16.0.3",
         "@apollo/client": "^3.7.9",
         "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
         "@cds/core": "^6.3.2",
@@ -66,26 +66,26 @@
         "prosemirror-tables": "^1.3.2",
         "rxjs": "^7.8.0",
         "tslib": "^2.5.0",
-        "zone.js": "~0.12.0"
+        "zone.js": "~0.13.0"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "^15.2.1",
-        "@angular-eslint/builder": "^15.2.1",
-        "@angular-eslint/eslint-plugin": "^15.2.1",
-        "@angular-eslint/eslint-plugin-template": "^15.2.1",
-        "@angular-eslint/schematics": "^15.2.1",
-        "@angular-eslint/template-parser": "^15.2.1",
-        "@angular/cli": "^15.2.1",
-        "@angular/compiler": "^15.2.1",
-        "@angular/compiler-cli": "^15.2.1",
+        "@angular-devkit/build-angular": "^16.0.3",
+        "@angular-eslint/builder": "^16.0.3",
+        "@angular-eslint/eslint-plugin": "^16.0.3",
+        "@angular-eslint/eslint-plugin-template": "^16.0.3",
+        "@angular-eslint/schematics": "^16.0.3",
+        "@angular-eslint/template-parser": "^16.0.3",
+        "@angular/cli": "^16.0.3",
+        "@angular/compiler": "^16.0.3",
+        "@angular/compiler-cli": "^16.0.3",
         "@types/jasmine": "~3.6.0",
         "@types/jasminewd2": "~2.0.6",
         "@types/node": "^14.14.31",
-        "@typescript-eslint/eslint-plugin": "5.48.2",
-        "@typescript-eslint/parser": "5.48.2",
+        "@typescript-eslint/eslint-plugin": "^5.59.2",
+        "@typescript-eslint/parser": "^5.59.2",
         "@vendure/ngx-translate-extract": "^8.1.0",
         "cross-spawn": "^7.0.3",
-        "eslint": "^8.33.0",
+        "eslint": "^8.39.0",
         "eslint-plugin-import": "^2.27.5",
         "eslint-plugin-jsdoc": "^45.0.0",
         "eslint-plugin-prefer-arrow": "^1.2.3",
@@ -98,7 +98,7 @@
         "karma-jasmine": "~4.0.0",
         "karma-jasmine-html-reporter": "^1.7.0",
         "karma-mocha-reporter": "^2.2.5",
-        "ng-packagr": "15.2.2",
+        "ng-packagr": "16.0.1",
         "puppeteer": "^19.8.3",
         "rimraf": "^3.0.2",
         "typescript": "4.9.5"

packages/admin-ui/src/lib/core/src/common/base-entity-resolver.ts

@@ -1,11 +1,4 @@
-import {
-    ActivatedRouteSnapshot,
-    ActivationStart,
-    Resolve,
-    ResolveData,
-    Router,
-    RouterStateSnapshot,
-} from '@angular/router';
+import { ActivatedRouteSnapshot, ActivationStart, ResolveData, Router, RouterStateSnapshot } from '@angular/router';
 import { Type } from '@vendure/common/lib/shared-types';
 import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
 import { Observable, of } from 'rxjs';
@@ -53,7 +46,7 @@ export function createResolveData<T extends BaseEntityResolver<R>, R>(
  *
  * @docsCategory list-detail-views
  */
-export class BaseEntityResolver<T> implements Resolve<Observable<T>> {
+export class BaseEntityResolver<T>  {
     constructor(
         protected router: Router,
         private readonly emptyEntity: T,

packages/admin-ui/src/lib/core/src/components/breadcrumb/breadcrumb.component.spec.ts

@@ -1,7 +1,7 @@
 import { Component, DebugElement } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { Resolve, Router, Routes } from '@angular/router';
+import { Router, Routes } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
@@ -459,7 +459,7 @@ class TestChildComponent {}
 
 type TestComponent = TestParentComponent | TestChildComponent;
 
-class FooResolver implements Resolve<string> {
+class FooResolver  {
     resolve(): Observable<string> {
         return observableOf('Foo');
     }

packages/admin-ui/src/lib/core/src/providers/guard/auth.guard.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 
@@ -13,7 +13,7 @@ import { AuthService } from '../auth/auth.service';
 @Injectable({
     providedIn: 'root',
 })
-export class AuthGuard implements CanActivate {
+export class AuthGuard  {
     private readonly externalLoginUrl: string | undefined;
 
     constructor(private router: Router, private authService: AuthService) {

packages/admin-ui/src/lib/core/src/shared/providers/routing/can-deactivate-detail-guard.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanDeactivate, Router, RouterStateSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -8,7 +8,7 @@ import { DeactivateAware } from '../../../common/deactivate-aware';
 import { ModalService } from '../../../providers/modal/modal.service';
 
 @Injectable()
-export class CanDeactivateDetailGuard implements CanDeactivate<DeactivateAware> {
+export class CanDeactivateDetailGuard  {
     constructor(private modalService: ModalService, private router: Router) {}
 
     canDeactivate(

packages/admin-ui/src/lib/login/src/providers/login.guard.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { AuthService } from '@vendure/admin-ui/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -10,7 +10,7 @@ import { map } from 'rxjs/operators';
 @Injectable({
     providedIn: 'root',
 })
-export class LoginGuard implements CanActivate {
+export class LoginGuard  {
     constructor(private router: Router, private authService: AuthService) {}
 
     canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {

packages/admin-ui/src/lib/order/src/providers/routing/order-resolver.ts

@@ -1,11 +1,5 @@
 import { Injectable } from '@angular/core';
-import {
-    ActivatedRouteSnapshot,
-    ActivationStart,
-    Resolve,
-    Router,
-    RouterStateSnapshot,
-} from '@angular/router';
+import { ActivatedRouteSnapshot, ActivationStart, Router, RouterStateSnapshot } from '@angular/router';
 import { DataService, OrderDetailFragment } from '@vendure/admin-ui/core';
 import { notNullOrUndefined } from '@vendure/common/lib/shared-utils';
 import { EMPTY, Observable } from 'rxjs';
@@ -19,7 +13,7 @@ import { DraftOrderDetailComponent } from '../../components/draft-order-detail/d
 @Injectable({
     providedIn: 'root',
 })
-export class OrderResolver implements Resolve<Observable<OrderDetailFragment>> {
+export class OrderResolver  {
     constructor(private router: Router, private dataService: DataService) {}
 
     /** @internal */

packages/admin-ui/src/lib/order/src/providers/routing/order.guard.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { ActivatedRouteSnapshot, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
 import { DataService } from '@vendure/admin-ui/core';
 import { EMPTY, Observable } from 'rxjs';
 import { map, mergeMapTo, tap } from 'rxjs/operators';
@@ -7,7 +7,7 @@ import { map, mergeMapTo, tap } from 'rxjs/operators';
 @Injectable({
     providedIn: 'root',
 })
-export class OrderGuard implements CanActivate {
+export class OrderGuard  {
     constructor(private dataService: DataService, private router: Router) {}
 
     canActivate(