Upgrade to angular 16

.github/workflows/build.yml

@@ -38,7 +38,7 @@ jobs:
     strategy:
       # Create a matrix of Node versions to test against (in parallel)
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [18.x, 20.x]
       # Do NOT exit immediately if one matrix job fails
       fail-fast: false
     # These are the actual CI steps to perform per job

package.json

@@ -55,28 +55,28 @@
     "ts-node": "10.2.1"
   },
   "dependencies": {
-    "@angular/animations": "^15.2.8",
-    "@angular/cdk": "^15.2.8",
-    "@angular/common": "^15.2.8",
-    "@angular/compiler": "^15.2.8",
-    "@angular/core": "^15.2.8",
-    "@angular/forms": "^15.2.8",
-    "@angular/localize": "15.2.8",
-    "@angular/platform-browser": "^15.2.8",
-    "@angular/platform-browser-dynamic": "^15.2.8",
-    "@angular/platform-server": "^15.2.8",
-    "@angular/router": "^15.2.8",
+    "@angular/animations": "^16.2.12",
+    "@angular/cdk": "^16.2.12",
+    "@angular/common": "^16.2.12",
+    "@angular/compiler": "^16.2.12",
+    "@angular/core": "^16.2.12",
+    "@angular/forms": "^16.2.12",
+    "@angular/localize": "16.2.12",
+    "@angular/platform-browser": "^16.2.12",
+    "@angular/platform-browser-dynamic": "^16.2.12",
+    "@angular/platform-server": "^16.2.12",
+    "@angular/router": "^16.2.12",
     "@babel/runtime": "7.21.0",
     "@kolkov/ngx-gallery": "^2.0.1",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.11.3",
     "@ng-bootstrap/ng-bootstrap": "^11.0.0",
-    "@ng-dynamic-forms/core": "^15.0.0",
-    "@ng-dynamic-forms/ui-ng-bootstrap": "^15.0.0",
-    "@ngrx/effects": "^15.4.0",
-    "@ngrx/router-store": "^15.4.0",
-    "@ngrx/store": "^15.4.0",
-    "@nguniversal/express-engine": "^15.2.1",
+    "@ng-dynamic-forms/core": "^16.0.0",
+    "@ng-dynamic-forms/ui-ng-bootstrap": "^16.0.0",
+    "@ngrx/effects": "^16.3.0",
+    "@ngrx/router-store": "^16.3.0",
+    "@ngrx/store": "^16.3.0",
+    "@nguniversal/express-engine": "^16.2.0",
     "@ngx-translate/core": "^14.0.0",
     "@nicky-lenaers/ngx-scroll-to": "^14.0.0",
     "@types/grecaptcha": "^3.0.4",
@@ -110,17 +110,15 @@
     "lodash": "^4.17.21",
     "lru-cache": "^7.14.1",
     "markdown-it": "^13.0.1",
-    "markdown-it-mathjax3": "^4.3.2",
     "mirador": "^3.3.0",
     "mirador-dl-plugin": "^0.13.0",
     "mirador-share-plugin": "^0.11.0",
     "morgan": "^1.10.0",
     "ng-mocks": "^14.10.0",
-    "ng2-file-upload": "1.4.0",
+    "ng2-file-upload": "5.0.0",
     "ng2-nouislider": "^2.0.0",
-    "ngx-infinite-scroll": "^15.0.0",
+    "ngx-infinite-scroll": "^16.0.0",
     "ngx-pagination": "6.0.3",
-    "ngx-sortablejs": "^11.1.0",
     "ngx-ui-switch": "^14.1.0",
     "nouislider": "^15.7.1",
     "pem": "1.14.7",
@@ -132,24 +130,24 @@
     "sortablejs": "1.15.0",
     "uuid": "^8.3.2",
     "webfontloader": "1.6.28",
-    "zone.js": "~0.11.5"
+    "zone.js": "~0.13.3"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "~15.0.0",
-    "@angular-devkit/build-angular": "^15.2.6",
-    "@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": "^16.0.4",
-    "@angular/compiler-cli": "^15.2.8",
-    "@angular/language-service": "^15.2.8",
+    "@angular-builders/custom-webpack": "~16.0.0",
+    "@angular-devkit/build-angular": "^16.2.12",
+    "@angular-eslint/builder": "16.3.1",
+    "@angular-eslint/eslint-plugin": "16.3.1",
+    "@angular-eslint/eslint-plugin-template": "16.3.1",
+    "@angular-eslint/schematics": "16.3.1",
+    "@angular-eslint/template-parser": "16.3.1",
+    "@angular/cli": "^16.2.12",
+    "@angular/compiler-cli": "^16.2.12",
+    "@angular/language-service": "^16.2.12",
     "@cypress/schematic": "^1.5.0",
     "@fortawesome/fontawesome-free": "^6.4.0",
-    "@ngrx/store-devtools": "^15.4.0",
-    "@ngtools/webpack": "^15.2.6",
-    "@nguniversal/builders": "^15.2.1",
+    "@ngrx/store-devtools": "^16.3.0",
+    "@ngtools/webpack": "^16.2.12",
+    "@nguniversal/builders": "^16.2.0",
     "@types/deep-freeze": "0.1.2",
     "@types/ejs": "^3.1.2",
     "@types/express": "^4.17.17",
@@ -186,7 +184,7 @@
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-mocha-reporter": "2.2.5",
-    "ngx-mask": "^13.1.7",
+    "ngx-mask": "14.2.4",
     "nodemon": "^2.0.22",
     "postcss": "^8.4",
     "postcss-apply": "0.12.0",
@@ -202,7 +200,7 @@
     "sass-loader": "^12.6.0",
     "sass-resources-loader": "^2.2.5",
     "ts-node": "^8.10.2",
-    "typescript": "~4.8.4",
+    "typescript": "~4.9.3",
     "webpack": "5.76.1",
     "webpack-bundle-analyzer": "^4.8.0",
     "webpack-cli": "^4.2.0",

server.ts

@@ -48,7 +48,7 @@ import { hasNoValue, hasValue } from './src/app/shared/empty.util';
 
 import { UIServerConfig } from './src/config/ui-server-config.interface';
 
-import { ServerAppModule } from './src/main.server';
+import bootstrap from './src/main.server';
 
 import { buildAppConfig } from './src/config/config.server';
 import { APP_CONFIG, AppConfig } from './src/config/app-config.interface';
@@ -130,7 +130,7 @@ export function app() {
   // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
   server.engine('html', (_, options, callback) =>
     ngExpressEngine({
-      bootstrap: ServerAppModule,
+      bootstrap,
       providers: [
         {
           provide: REQUEST,
@@ -142,10 +142,10 @@ export function app() {
         },
         {
           provide: APP_CONFIG,
-          useValue: environment
-        }
-      ]
-    })(_, (options as any), callback)
+          useValue: environment,
+        },
+      ],
+    })(_, (options as any), callback),
   );
 
   server.engine('ejs', ejs.renderFile);
@@ -162,7 +162,7 @@ export function app() {
   server.get('/robots.txt', (req, res) => {
     res.setHeader('content-type', 'text/plain');
     res.render('assets/robots.txt.ejs', {
-      'origin': req.protocol + '://' + req.headers.host
+      'origin': req.protocol + '://' + req.headers.host,
     });
   });
 
@@ -177,7 +177,7 @@ export function app() {
   router.use('/sitemap**', createProxyMiddleware({
     target: `${environment.rest.baseUrl}/sitemaps`,
     pathRewrite: path => path.replace(environment.ui.nameSpace, '/'),
-    changeOrigin: true
+    changeOrigin: true,
   }));
 
   /**
@@ -186,7 +186,7 @@ export function app() {
   router.use('/signposting**', createProxyMiddleware({
     target: `${environment.rest.baseUrl}`,
     pathRewrite: path => path.replace(environment.ui.nameSpace, '/'),
-    changeOrigin: true
+    changeOrigin: true,
   }));
 
   /**
@@ -197,7 +197,7 @@ export function app() {
     const RateLimit = require('express-rate-limit');
     const limiter = new RateLimit({
       windowMs: (environment.ui as UIServerConfig).rateLimiter.windowMs,
-      max: (environment.ui as UIServerConfig).rateLimiter.max
+      max: (environment.ui as UIServerConfig).rateLimiter.max,
     });
     server.use(limiter);
   }
@@ -325,7 +325,7 @@ function initCache() {
     botCache = new LRU( {
       max: environment.cache.serverSide.botCache.max,
       ttl: environment.cache.serverSide.botCache.timeToLive,
-      allowStale: environment.cache.serverSide.botCache.allowStale
+      allowStale: environment.cache.serverSide.botCache.allowStale,
     });
   }
 
@@ -337,7 +337,7 @@ function initCache() {
     anonymousCache = new LRU( {
       max: environment.cache.serverSide.anonymousCache.max,
       ttl: environment.cache.serverSide.anonymousCache.timeToLive,
-      allowStale: environment.cache.serverSide.anonymousCache.allowStale
+      allowStale: environment.cache.serverSide.anonymousCache.allowStale,
     });
   }
 }
@@ -415,7 +415,7 @@ function checkCacheForRequest(cacheName: string, cache: LRU<string, any>, req, r
   const key = getCacheKey(req);
 
   // Check if this page is in our cache
-  let cachedCopy = cache.get(key);
+  const cachedCopy = cache.get(key);
   if (cachedCopy) {
     if (environment.cache.serverSide.debug) { console.log(`CACHE HIT FOR ${key} in ${cacheName} cache`); }
 
@@ -529,20 +529,20 @@ function serverStarted() {
 function createHttpsServer(keys) {
   const listener = createServer({
     key: keys.serviceKey,
-    cert: keys.certificate
+    cert: keys.certificate,
   }, app).listen(environment.ui.port, environment.ui.host, () => {
     serverStarted();
   });
 
   // Graceful shutdown when signalled
-  const terminator = createHttpTerminator({server: listener});
+  const terminator = createHttpTerminator({ server: listener });
   process.on('SIGINT', () => {
-      void (async ()=> {
-        console.debug('Closing HTTPS server on signal');
-        await terminator.terminate().catch(e => { console.error(e); });
-        console.debug('HTTPS server closed');
-      })();
-      });
+    void (async ()=> {
+      console.debug('Closing HTTPS server on signal');
+      await terminator.terminate().catch(e => { console.error(e); });
+      console.debug('HTTPS server closed');
+    })();
+  });
 }
 
 /**
@@ -559,14 +559,14 @@ function run() {
   });
 
   // Graceful shutdown when signalled
-  const terminator = createHttpTerminator({server: listener});
+  const terminator = createHttpTerminator({ server: listener });
   process.on('SIGINT', () => {
-      void (async () => {
-        console.debug('Closing HTTP server on signal');
-        await terminator.terminate().catch(e => { console.error(e); });
-        console.debug('HTTP server closed.');return undefined;
-        })();
-      });
+    void (async () => {
+      console.debug('Closing HTTP server on signal');
+      await terminator.terminate().catch(e => { console.error(e); });
+      console.debug('HTTP server closed.');return undefined;
+    })();
+  });
 }
 
 function start() {
@@ -597,7 +597,7 @@ function start() {
     if (serviceKey && certificate) {
       createHttpsServer({
         serviceKey: serviceKey,
-        certificate: certificate
+        certificate: certificate,
       });
     } else {
       console.warn('Disabling certificate validation and proceeding with a self-signed certificate. If this is a production server, it is recommended that you configure a valid certificate instead.');
@@ -606,7 +606,7 @@ function start() {
 
       createCertificate({
         days: 1,
-        selfSigned: true
+        selfSigned: true,
       }, (error, keys) => {
         createHttpsServer(keys);
       });
@@ -627,7 +627,7 @@ function healthCheck(req, res) {
     })
     .catch((error) => {
       res.status(error.response.status).send({
-        error: error.message
+        error: error.message,
       });
     });
 }

src/app/access-control/access-control-routes.ts

@@ -1,5 +1,8 @@
 import { AbstractControl } from '@angular/forms';
-import { Route } from '@angular/router';
+import {
+  mapToCanActivate,
+  Route,
+} from '@angular/router';
 import {
   DYNAMIC_ERROR_MESSAGES_MATCHER,
   DynamicErrorMessagesMatcher,
@@ -43,7 +46,7 @@ export const ROUTES: Route[] = [
     },
     providers,
     data: { title: 'admin.access-control.epeople.title', breadcrumbKey: 'admin.access-control.epeople' },
-    canActivate: [SiteAdministratorGuard],
+    canActivate: mapToCanActivate([SiteAdministratorGuard]),
   },
   {
     path: `${EPERSON_PATH}/create`,
@@ -53,7 +56,7 @@ export const ROUTES: Route[] = [
     },
     providers,
     data: { title: 'admin.access-control.epeople.add.title', breadcrumbKey: 'admin.access-control.epeople.add' },
-    canActivate: [SiteAdministratorGuard],
+    canActivate: mapToCanActivate([SiteAdministratorGuard]),
   },
   {
     path: `${EPERSON_PATH}/:id/edit`,
@@ -64,7 +67,7 @@ export const ROUTES: Route[] = [
     },
     providers,
     data: { title: 'admin.access-control.epeople.edit.title', breadcrumbKey: 'admin.access-control.epeople.edit' },
-    canActivate: [SiteAdministratorGuard],
+    canActivate: mapToCanActivate([SiteAdministratorGuard]),
   },
   {
     path: GROUP_PATH,
@@ -74,7 +77,7 @@ export const ROUTES: Route[] = [
     },
     providers,
     data: { title: 'admin.access-control.groups.title', breadcrumbKey: 'admin.access-control.groups' },
-    canActivate: [GroupAdministratorGuard],
+    canActivate: mapToCanActivate([GroupAdministratorGuard]),
   },
   {
     path: `${GROUP_PATH}/create`,
@@ -87,7 +90,7 @@ export const ROUTES: Route[] = [
       title: 'admin.access-control.groups.title.addGroup',
       breadcrumbKey: 'admin.access-control.groups.addGroup',
     },
-    canActivate: [GroupAdministratorGuard],
+    canActivate: mapToCanActivate([GroupAdministratorGuard]),
   },
   {
     path: `${GROUP_PATH}/:groupId/edit`,
@@ -100,7 +103,7 @@ export const ROUTES: Route[] = [
       title: 'admin.access-control.groups.title.singleGroup',
       breadcrumbKey: 'admin.access-control.groups.singleGroup',
     },
-    canActivate: [GroupPageGuard],
+    canActivate: mapToCanActivate([GroupPageGuard]),
   },
   {
     path: 'bulk-access',
@@ -109,6 +112,6 @@ export const ROUTES: Route[] = [
       breadcrumb: I18nBreadcrumbResolver,
     },
     data: { title: 'admin.access-control.bulk-access.title', breadcrumbKey: 'admin.access-control.bulk-access' },
-    canActivate: [SiteAdministratorGuard],
+    canActivate: mapToCanActivate([SiteAdministratorGuard]),
   },
 ];

src/app/access-control/epeople-registry/eperson-resolver.service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import {
   ActivatedRouteSnapshot,
-  Resolve,
   RouterStateSnapshot,
 } from '@angular/router';
 import { Store } from '@ngrx/store';
@@ -27,7 +26,7 @@ export const EPERSON_EDIT_FOLLOW_LINKS: FollowLinkConfig<EPerson>[] = [
 @Injectable({
   providedIn: 'root',
 })
-export class EPersonResolver implements Resolve<RemoteData<EPerson>> {
+export class EPersonResolver  {
 
   constructor(
     protected ePersonService: EPersonDataService,