Merge branch 'main' into codespell

2025-10-07 01:54:15 +00:00 · 2024-09-06 22:53:45 +02:00
parent bfd61b2f19 ba05b22fae
commit 1a9d68c260
83 changed files with 24785 additions and 12685 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -25,4 +25,6 @@ npm-debug.log.*

 # Webpack files
 webpack.records.json
-package-lock.json
+
+# Yarn no longer used
+yarn.lock
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -165,6 +165,7 @@
        "@angular-eslint/no-output-native": "warn",
        "@angular-eslint/no-output-on-prefix": "warn",
        "@angular-eslint/no-conflicting-lifecycle": "warn",
+        "@angular-eslint/use-lifecycle-interface": "error",

        "@typescript-eslint/no-inferrable-types":[
          "error",
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -21,8 +21,8 @@ However, reviewers may request that you complete any actions in this list if you

 - [ ] My PR is **created against the `main` branch** of code (unless it is a backport or is fixing an issue specific to an older branch).
 - [ ] My PR is **small in size** (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.
- [ ] My PR **passes [ESLint](https://eslint.org/)** validation using `yarn lint`
- [ ] My PR **doesn't introduce circular dependencies** (verified via `yarn check-circ-deps`)
+- [ ] My PR **passes [ESLint](https://eslint.org/)** validation using `npm run lint`
+- [ ] My PR **doesn't introduce circular dependencies** (verified via `npm run check-circ-deps`)
 - [ ] My PR **includes [TypeDoc](https://typedoc.org/) comments** for _all new (or modified) public methods and classes_. It also includes TypeDoc for large or complex private methods.
 - [ ] My PR **passes all specs/tests and includes new/updated specs or tests** based on the [Code Testing Guide](https://wiki.lyrasis.org/display/DSPACE/Code+Testing+Guide).
 - [ ] My PR **aligns with [Accessibility guidelines](https://wiki.lyrasis.org/display/DSDOC8x/Accessibility)** if it makes changes to the user interface.
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -69,39 +69,39 @@ jobs:
          fi
          google-chrome --version

-      # https://github.com/actions/cache/blob/main/examples.md#node---yarn
-      - name: Get Yarn cache directory
-        id: yarn-cache-dir-path
-        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
-      - name: Cache Yarn dependencies
+      # https://github.com/actions/cache/blob/main/examples.md#node---npm
+      - name: Get NPM cache directory
+        id: npm-cache-dir
+        run: echo "dir=$(npm config get cache)" >> $GITHUB_OUTPUT
+      - name: Cache NPM dependencies
        uses: actions/cache@v4
        with:
-          # Cache entire Yarn cache directory (see previous step)
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          # Cache key is hash of yarn.lock. Therefore changes to yarn.lock will invalidate cache
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: ${{ runner.os }}-yarn-
+          # Cache entire NPM cache directory (see previous step)
+          path: ${{ steps.npm-cache-dir.outputs.dir }}
+          # Cache key is hash of package-lock.json. Therefore changes to package-lock.json will invalidate cache
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: ${{ runner.os }}-npm-

-      - name: Install Yarn dependencies
-        run: yarn install --frozen-lockfile
+      - name: Install NPM dependencies
+        run: npm clean-install

      - name: Build lint plugins
-        run: yarn run build:lint
+        run: npm run build:lint

      - name: Run lint plugin tests
-        run: yarn run test:lint:nobuild
+        run: npm run test:lint:nobuild

      - name: Run lint
-        run: yarn run lint:nobuild --quiet
+        run: npm run lint:nobuild -- --quiet

      - name: Check for circular dependencies
-        run: yarn run check-circ-deps
+        run: npm run check-circ-deps

      - name: Run build
-        run: yarn run build:prod
+        run: npm run build:prod

      - name: Run specs (unit tests)
-        run: yarn run test:headless
+        run: npm run test:headless

      # Upload code coverage report to artifact (for one version of Node only),
      # so that it can be shared with the 'codecov' job (see below)
@@ -131,7 +131,7 @@ jobs:
          # Run tests in Chrome, headless mode (default)
          browser: chrome
          # Start app before running tests (will be stopped automatically after tests finish)
-          start: yarn run serve:ssr
+          start: npm run serve:ssr
          # Wait for backend & frontend to be available
          # NOTE: We use the 'sites' REST endpoint to also ensure the database is ready
          wait-on: http://127.0.0.1:8080/server/api/core/sites, http://127.0.0.1:4000
@@ -167,7 +167,7 @@ jobs:
      # Start up the app with SSR enabled (run in background)
      - name: Start app in SSR (server-side rendering) mode
        run: |
-          nohup yarn run serve:ssr &
+          nohup npm run serve:ssr &
          printf 'Waiting for app to start'
          until curl --output /dev/null --silent --head --fail http://127.0.0.1:4000/home; do
            printf '.'
--- a/.gitignore
+++ b/.gitignore
@@ -28,12 +28,12 @@ webpack.records.json

 morgan.log

+# Yarn no longer used
+yarn.lock
 yarn-error.log

 *.css

-package-lock.json
-
 .java-version

 .env
--- a/6
+++ b/6
@@ -11,9 +11,7 @@ WORKDIR /app
 ADD . /app/
 EXPOSE 4000

-# We run yarn install with an increased network timeout (5min) to avoid "ESOCKETTIMEDOUT" errors from hub.docker.com
-# See, for example https://github.com/yarnpkg/yarn/issues/5540
-RUN yarn install --network-timeout 300000
+RUN npm install

 # When running in dev mode, 4GB of memory is required to build & launch the app.
 # This default setting can be overridden as needed in your shell, via an env file or in docker-compose.
@@ -25,4 +23,4 @@ ENV NODE_OPTIONS="--max_old_space_size=4096"
 # NOTE: At this time it is only possible to run Docker container in Production mode
 # if you have a public URL. See https://github.com/DSpace/dspace-angular/issues/1485
 ENV NODE_ENV development
-CMD yarn serve --host 0.0.0.0
+CMD npm run serve -- --host 0.0.0.0
--- a/Dockerfile.dist
+++ b/Dockerfile.dist
@@ -11,11 +11,11 @@ FROM node:18-alpine AS build
 RUN apk add --update python3 make g++ && rm -rf /var/cache/apk/*

 WORKDIR /app
-COPY package.json yarn.lock ./
-RUN yarn install --network-timeout 300000
+COPY package.json package-lock.json ./
+RUN npm install

 ADD . /app/
-RUN yarn build:prod
+RUN npm run build:prod

 FROM node:18-alpine
 RUN npm install --global pm2
--- a/README.md
+++ b/README.md
@@ -35,7 +35,7 @@ https://wiki.lyrasis.org/display/DSDOC7x/Installing+DSpace
 Quick start
 -----------

-**Ensure you're running [Node](https://nodejs.org) `v16.x` or `v18.x`, [npm](https://www.npmjs.com/) >= `v5.x` and [yarn](https://yarnpkg.com) == `v1.x`**
+**Ensure you're running [Node](https://nodejs.org) `v16.x` or `v18.x`, [npm](https://www.npmjs.com/) >= `v5.x`**

 ```bash
 # clone the repo
@@ -45,10 +45,10 @@ git clone https://github.com/DSpace/dspace-angular.git
 cd dspace-angular

 # install the local dependencies
-yarn install
+npm install

 # start the server
-yarn start
+npm start
 ```

 Then go to [http://localhost:4000](http://localhost:4000) in your browser
@@ -77,7 +77,7 @@ Table of Contents
 -	[Recommended Editors/IDEs](#recommended-editorsides)
 -	[Collaborating](#collaborating)
 -	[File Structure](#file-structure)
-	[Managing Dependencies (via yarn)](#managing-dependencies-via-yarn)
+-	[Managing Dependencies (via npm)](#managing-dependencies-via-npm)
 -	[Frequently asked questions](#frequently-asked-questions)
 -	[License](#license)

@@ -89,15 +89,15 @@ You can find more information on the technologies used in this project (Angular.
 Requirements
 ------------

-	[Node.js](https://nodejs.org) and [yarn](https://yarnpkg.com)
-	Ensure you're running node `v16.x` or `v18.x` and yarn == `v1.x`
+-	[Node.js](https://nodejs.org)
+-	Ensure you're running node `v16.x` or `v18.x`

 If you have [`nvm`](https://github.com/creationix/nvm#install-script) or [`nvm-windows`](https://github.com/coreybutler/nvm-windows) installed, which is highly recommended, you can run `nvm install --lts && nvm use` to install and start using the latest Node LTS.

 Installing
 ----------

-	`yarn install` to install the local dependencies
+-	`npm install` to install the local dependencies

 ### Configuring

@@ -202,7 +202,7 @@ import { environment } from '../environment.ts';
 Running the app
 ---------------

-After you have installed all dependencies you can now run the app. Run `yarn run start:dev` to start a local server which will watch for changes, rebuild the code, and reload the server for you. You can visit it at `http://localhost:4000`.
+After you have installed all dependencies you can now run the app. Run `npm run start:dev` to start a local server which will watch for changes, rebuild the code, and reload the server for you. You can visit it at `http://localhost:4000`.

 ### Running in production mode

@@ -211,20 +211,20 @@ When building for production we're using Ahead of Time (AoT) compilation. With A
 To build the app for production and start the server (in one command) run:

 ```bash
-yarn start
+npm start
 ```
 This will run the application in an instance of the Express server, which is included.

 If you only want to build for production, without starting, run:

 ```bash
-yarn run build:prod
+npm run build:prod
 ```
 This will build the application and put the result in the `dist` folder.  You can copy this folder to wherever you need it for your application server.  If you will be using the built-in Express server, you'll also need a copy of the `node_modules` folder tucked inside your copy of `dist`.

 After building the app for production, it can be started by running:
 ```bash
-yarn run serve:ssr
+npm run serve:ssr
 ```

 ### Running the application with Docker
@@ -238,14 +238,14 @@ Cleaning
 --------

 ```bash
-# clean everything, including node_modules. You'll need to run yarn install again afterwards.
-yarn run clean
+# clean everything, including node_modules. You'll need to run npm install again afterwards.
+npm run clean

 # clean files generated by the production build (.ngfactory files, css files, etc)
-yarn run clean:prod
+npm run clean:prod

 # cleans the distribution directory
-yarn run clean:dist
+npm run clean:dist
 ```


@@ -259,9 +259,9 @@ If you would like to contribute by testing a Pull Request (PR), here's how to do
 1. Pull down the branch that the Pull Request was built from.  Easy instructions for doing so can be found on the Pull Request itself.
 	* Next to the "Merge" button, you'll see a link that says "command line instructions".
 	* Click it, and follow "Step 1" of those instructions to checkout the pull down the PR branch.
-2. `yarn run clean`  (This resets your local dependencies to ensure you are up-to-date with this PR)
-3. `yarn install` (Updates your local dependencies to those in the PR)
-4. `yarn start` (Rebuilds the project, and deploys to localhost:4000, by default)
+2. `npm run clean`  (This resets your local dependencies to ensure you are up-to-date with this PR)
+3. `npm install` (Updates your local dependencies to those in the PR)
+4. `npm start` (Rebuilds the project, and deploys to localhost:4000, by default)
 5. At this point, the code from the PR will be deployed to http://localhost:4000.  Test it out, and ensure that it does what is described in the PR (or fixes the bug described in the ticket linked to the PR).

 Once you have tested the Pull Request, please add a comment and/or approval to the PR to let us know whether you found it to be successful (or not). Thanks!
@@ -271,13 +271,13 @@ Once you have tested the Pull Request, please add a comment and/or approval to t

 Unit tests use the [Jasmine test framework](https://jasmine.github.io/), and are run via [Karma](https://karma-runner.github.io/).

-You can find the Karma configuration file at the same level of this README file:`./karma.conf.js` If you are going to use a remote test environment you need to edit the `./karma.conf.js`. Follow the instructions you will find inside it. To executing tests whenever any file changes you can modify the 'autoWatch' option to 'true' and 'singleRun' option to 'false'. A coverage report is also available at: http://localhost:9876/ after you run: `yarn run coverage`.
+You can find the Karma configuration file at the same level of this README file:`./karma.conf.js` If you are going to use a remote test environment you need to edit the `./karma.conf.js`. Follow the instructions you will find inside it. To executing tests whenever any file changes you can modify the 'autoWatch' option to 'true' and 'singleRun' option to 'false'. A coverage report is also available at: http://localhost:9876/ after you run: `npm run coverage`.

 The default browser is Google Chrome.

 Place your tests in the same location of the application source code files that they test, e.g. ending with `*.component.spec.ts`

-and run: `yarn test`
+and run: `npm test`

 If you run into odd test errors, see the Angular guide to debugging tests: https://angular.io/guide/test-debugging

@@ -357,14 +357,14 @@ Some UI specific configuration documentation is also found in the [`./docs`](doc

 To build the code documentation we use [TYPEDOC](http://typedoc.org). TYPEDOC is a documentation generator for TypeScript projects. It extracts information from properly formatted comments that can be written within the code files. Follow the instructions [here](http://typedoc.org/guides/doccomments/) to know how to make those comments.

-Run:`yarn run docs` to produce the documentation that will be available in the 'doc' folder.
+Run:`npm run docs` to produce the documentation that will be available in the 'doc' folder.

 Other commands
 --------------

 There are many more commands in the `scripts` section of `package.json`. Most of these are executed by one of the commands mentioned above.

-A command with a name that starts with `pre` or `post` will be executed automatically before or after the script with the matching name. e.g. if you type `yarn run start` the `prestart` script will run first, then the `start` script will trigger.
+A command with a name that starts with `pre` or `post` will be executed automatically before or after the script with the matching name. e.g. if you type `npm run start` the `prestart` script will run first, then the `start` script will trigger.

 Recommended Editors/IDEs
 ------------------------
@@ -456,6 +456,7 @@ dspace-angular
 ├── LICENSES_THIRD_PARTY                                *
 ├── nodemon.json                                        * Nodemon (https://nodemon.io/) configuration
 ├── package.json                                        * This file describes the npm package for this project, its dependencies, scripts, etc.
+├── package-lock.json                                   * npm lockfile (https://docs.npmjs.com/cli/v10/configuring-npm/package-lock-json)
 ├── postcss.config.js                                   * PostCSS (http://postcss.org/) configuration
 ├── README.md                                           * This document
 ├── SECURITY.md                                         *
@@ -466,30 +467,29 @@ dspace-angular
 ├── tsconfig.spec.json                                  * TypeScript config for tests
 ├── tsconfig.ts-node.json                               * TypeScript config for using ts-node directly
 ├── tslint.json                                         * TSLint (https://palantir.github.io/tslint/) configuration
-├── typedoc.json                                        * TYPEDOC configuration
-└── yarn.lock                                           * Yarn lockfile (https://yarnpkg.com/en/docs/yarn-lock)
+└── typedoc.json                                        * TYPEDOC configuration
 ```

-Managing Dependencies (via yarn)
+Managing Dependencies (via npm)
 -------------

-This project makes use of [`yarn`](https://yarnpkg.com/en/) to ensure that the exact same dependency versions are used every time you install it.
+This project makes use of [`npm`](https://docs.npmjs.com/about-npm) to ensure that the exact same dependency versions are used every time you install it.

-* `yarn` creates a [`yarn.lock`](https://yarnpkg.com/en/docs/yarn-lock) to track those versions. That file is updated automatically by whenever dependencies are added/updated/removed via yarn.
-* **Adding new dependencies**: To install/add a new dependency (third party library), use [`yarn add`](https://yarnpkg.com/en/docs/cli/add). For example: `yarn add some-lib`.
-    * If you are adding a new build tool dependency (to `devDependencies`), use `yarn add some-lib --dev`
-* **Upgrading existing dependencies**: To upgrade existing dependencies, you can use [`yarn upgrade`](https://yarnpkg.com/en/docs/cli/upgrade).  For example: `yarn upgrade some-lib` or `yarn upgrade some-lib@version`
-* **Removing dependencies**: If a dependency is no longer needed, or replaced, use [`yarn remove`](https://yarnpkg.com/en/docs/cli/remove) to remove it.
+* `npm` creates a [`package-lock.json`](https://docs.npmjs.com/cli/v10/configuring-npm/package-lock-json) to track those versions. That file is updated automatically by whenever dependencies are added/updated/removed via npm.
+* **Adding new dependencies**: To install/add a new dependency (third party library), use [`npm install`](https://docs.npmjs.com/cli/v10/commands/npm-install). For example: `npm install some-lib`.
+    * If you are adding a new build tool dependency (to `devDependencies`), use `npm install some-lib --save--dev`
+* **Upgrading existing dependencies**: To upgrade existing dependencies, you can use [`npm update`](https://docs.npmjs.com/cli/v10/commands/npm-update).  For example: `npm update some-lib` or `npm update some-lib@version`
+* **Removing dependencies**: If a dependency is no longer needed, or replaced, use [`npm uninstall`](https://docs.npmjs.com/cli/v10/commands/npm-uninstall) to remove it.

-As you can see above, using `yarn` commandline tools means that you should never need to modify the `package.json` manually. *We recommend always using `yarn` to keep dependencies updated / in sync.*
+As you can see above, using `npm` commandline tools means that you should never need to modify the `package.json` manually. *We recommend always using `npm` to keep dependencies updated / in sync.*

 ### Adding Typings for libraries

-If the library does not include typings, you can install them using yarn:
+If the library does not include typings, you can install them using npm:

 ```bash
-yarn add d3
-yarn add @types/d3 --dev
+npm install d3
+npm install @types/d3 --save-dev
 ```

 If the library doesn't have typings available at `@types/`, you can still use it by manually adding typings for it:
@@ -528,12 +528,12 @@ Frequently asked questions
 	-	See [the official angular style guide](https://angular.io/styleguide)
 -	Why is the size of my app larger in development?
 	-	The production build uses a whole host of techniques (ahead-of-time compilation, rollup to remove unreachable code, minification, etc.) to reduce the size, that aren't used during development in the interest of build speed.
-	node-pre-gyp ERR in yarn install (Windows)
+-	node-pre-gyp ERR in npm install (Windows)
 	-	install Python x86 version between 2.5 and 3.0 on windows. See [this issue](https://github.com/AngularClass/angular2-webpack-starter/issues/626)
-	How do I handle merge conflicts in yarn.lock?
-	-	first check out the yarn.lock file from the branch you're merging in to yours: e.g. `git checkout --theirs yarn.lock`
-	-	now run `yarn install` again. Yarn will create a new lockfile that contains both sets of changes.
-	-	then run `git add yarn.lock` to stage the lockfile for commit
+-	How do I handle merge conflicts in package-lock.json?
+	-	first check out the package-lock.json file from the branch you're merging in to yours: e.g. `git checkout --theirs package-lock.json`
+	-	now run `npm install` again. NPM will create a new lockfile that contains both sets of changes.
+	-	then run `git add package-lock.json` to stage the lockfile for commit
 	-	and `git commit` to conclude the merge

 Getting Help
--- a/lint/src/rules/html/themed-component-usages.ts
+++ b/lint/src/rules/html/themed-component-usages.ts
@@ -7,10 +7,8 @@
 */
 import { TmplAstElement } from '@angular-eslint/bundled-angular-compiler';
 import { TemplateParserServices } from '@angular-eslint/utils';
-import {
-  ESLintUtils,
-  TSESLint,
-} from '@typescript-eslint/utils';
+import { ESLintUtils } from '@typescript-eslint/utils';
+import { RuleContext } from '@typescript-eslint/utils/ts-eslint';

 import { fixture } from '../../../test/fixture';
 import {
@@ -52,7 +50,7 @@ The only exception to this rule are unit tests, where we may want to use the bas

 export const rule = ESLintUtils.RuleCreator.withoutDocs({
  ...info,
-  create(context: TSESLint.RuleContext<Message, unknown[]>) {
+  create(context: RuleContext<Message, unknown[]>) {
    if (getFilename(context).includes('.spec.ts')) {
      // skip inline templates in unit tests
      return {};
--- a/lint/src/rules/ts/themed-component-classes.ts
+++ b/lint/src/rules/ts/themed-component-classes.ts
@@ -7,9 +7,9 @@
 */
 import {
  ESLintUtils,
-  TSESLint,
  TSESTree,
 } from '@typescript-eslint/utils';
+import { RuleContext } from '@typescript-eslint/utils/ts-eslint';

 import { fixture } from '../../../test/fixture';
 import {
@@ -57,7 +57,7 @@ export const info = {

 export const rule = ESLintUtils.RuleCreator.withoutDocs({
  ...info,
-  create(context: TSESLint.RuleContext<Message, unknown[]>) {
+  create(context: RuleContext<Message, unknown[]>) {
    const filename = getFilename(context);

    if (filename.endsWith('.spec.ts')) {
--- a/lint/src/rules/ts/themed-component-selectors.ts
+++ b/lint/src/rules/ts/themed-component-selectors.ts
@@ -7,9 +7,9 @@
 */
 import {
  ESLintUtils,
-  TSESLint,
  TSESTree,
 } from '@typescript-eslint/utils';
+import { RuleContext } from '@typescript-eslint/utils/ts-eslint';

 import { fixture } from '../../../test/fixture';
 import { getComponentSelectorNode } from '../../util/angular';
@@ -58,7 +58,7 @@ Unit tests are exempt from this rule, because they may redefine components using

 export const rule = ESLintUtils.RuleCreator.withoutDocs({
  ...info,
-  create(context: TSESLint.RuleContext<Message, unknown[]>) {
+  create(context: RuleContext<Message, unknown[]>) {
    const filename = getFilename(context);

    if (filename.endsWith('.spec.ts')) {
--- a/lint/src/rules/ts/themed-component-usages.ts
+++ b/lint/src/rules/ts/themed-component-usages.ts
@@ -7,9 +7,9 @@
 */
 import {
  ESLintUtils,
-  TSESLint,
  TSESTree,
 } from '@typescript-eslint/utils';
+import { RuleContext } from '@typescript-eslint/utils/ts-eslint';

 import { fixture } from '../../../test/fixture';
 import {
@@ -68,7 +68,7 @@ There are a few exceptions where the base class can still be used:

 export const rule = ESLintUtils.RuleCreator.withoutDocs({
  ...info,
-  create(context: TSESLint.RuleContext<Message, unknown[]>) {
+  create(context: RuleContext<Message, unknown[]>) {
    const filename = getFilename(context);

    function handleUnthemedUsagesInTypescript(node: TSESTree.Identifier) {
--- a/lint/src/util/structure.ts
+++ b/lint/src/util/structure.ts
@@ -5,13 +5,17 @@
 *
 * http://www.dspace.org/license/
 */
-import { TSESLint } from '@typescript-eslint/utils';
-import { RuleTester } from 'eslint';
+import {
+  InvalidTestCase,
+  RuleMetaData,
+  RuleModule,
+  ValidTestCase,
+} from '@typescript-eslint/utils/ts-eslint';
 import { EnumType } from 'typescript';

-export type Meta = TSESLint.RuleMetaData<string>;
-export type Valid = TSESLint.ValidTestCase<unknown[]> | RuleTester.ValidTestCase;
-export type Invalid = TSESLint.InvalidTestCase<string, unknown[]> | RuleTester.InvalidTestCase;
+export type Meta = RuleMetaData<string, unknown[]>;
+export type Valid = ValidTestCase<unknown[]>;
+export type Invalid = InvalidTestCase<string, unknown[]>;

 export interface DSpaceESLintRuleInfo {
  name: string;
@@ -28,7 +32,7 @@ export interface NamedTests {
 export interface RuleExports {
  Message: EnumType,
  info: DSpaceESLintRuleInfo,
-  rule: TSESLint.RuleModule<string>,
+  rule: RuleModule<string>,
  tests: NamedTests,
  default: unknown,
 }
--- a/lint/src/util/typescript.ts
+++ b/lint/src/util/typescript.ts
@@ -5,17 +5,18 @@
 *
 * http://www.dspace.org/license/
 */
+import { TSESTree } from '@typescript-eslint/utils';
 import {
-  TSESLint,
-  TSESTree,
-} from '@typescript-eslint/utils';
+  RuleContext,
+  SourceCode,
+} from '@typescript-eslint/utils/ts-eslint';

 import {
  match,
  toUnixStylePath,
 } from './misc';

-export type AnyRuleContext = TSESLint.RuleContext<string, unknown[]>;
+export type AnyRuleContext = RuleContext<string, unknown[]>;

 /**
 * Return the current filename based on the ESLint rule context as a Unix-style path.
@@ -27,7 +28,7 @@ export function getFilename(context: AnyRuleContext): string {
  return toUnixStylePath(context.getFilename());
 }

-export function getSourceCode(context: AnyRuleContext): TSESLint.SourceCode {
+export function getSourceCode(context: AnyRuleContext): SourceCode {
  // TSESLint claims this is deprecated, but the suggested alternative is undefined (could be a version mismatch between ESLint and TSESlint?)
  // eslint-disable-next-line deprecation/deprecation
  return context.getSourceCode();
--- a/lint/test/testing.ts
+++ b/lint/test/testing.ts
@@ -7,7 +7,7 @@
 */

 import { RuleTester as TypeScriptRuleTester } from '@typescript-eslint/rule-tester';
-import { RuleTester } from 'eslint';
+import { RuleTester } from '@typescript-eslint/utils/ts-eslint';

 import { themeableComponents } from '../src/util/theme-support';
 import {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -5,27 +5,27 @@
    "ng": "ng",
    "config:watch": "nodemon",
    "test:rest": "ts-node --project ./tsconfig.ts-node.json scripts/test-rest.ts",
-    "start": "yarn run start:prod",
-    "start:dev": "nodemon --exec \"cross-env NODE_ENV=development yarn run serve\"",
-    "start:prod": "yarn run build:prod && cross-env NODE_ENV=production yarn run serve:ssr",
-    "start:mirador:prod": "yarn run build:mirador && yarn run start:prod",
-    "preserve": "yarn base-href",
+    "start": "npm run start:prod",
+    "start:dev": "nodemon --exec \"cross-env NODE_ENV=development npm run serve\"",
+    "start:prod": "npm run build:prod && cross-env NODE_ENV=production npm run serve:ssr",
+    "start:mirador:prod": "npm run build:mirador && npm run start:prod",
+    "preserve": "npm run base-href",
    "serve": "ts-node --project ./tsconfig.ts-node.json scripts/serve.ts",
    "serve:ssr": "node dist/server/main",
    "analyze": "webpack-bundle-analyzer dist/browser/stats.json",
    "build": "ng build --configuration development",
    "build:stats": "ng build --stats-json",
-    "build:prod": "cross-env NODE_ENV=production yarn run build:ssr",
+    "build:prod": "cross-env NODE_ENV=production npm run build:ssr",
    "build:ssr": "ng build --configuration production && ng run dspace-angular:server:production",
    "build:lint": "rimraf 'lint/dist/**/*.js' 'lint/dist/**/*.js.map' && tsc -b lint/tsconfig.json",
    "test": "ng test --source-map=true --watch=false --configuration test",
    "test:watch": "nodemon --exec \"ng test --source-map=true --watch=true --configuration test\"",
    "test:headless": "ng test --source-map=true --watch=false --configuration test --browsers=ChromeHeadless --code-coverage",
-    "test:lint": "yarn build:lint && yarn test:lint:nobuild",
+    "test:lint": "npm run build:lint && npm run test:lint:nobuild",
    "test:lint:nobuild": "jasmine --config=lint/jasmine.json",
-    "lint": "yarn build:lint && yarn lint:nobuild",
+    "lint": "npm run build:lint && npm run lint:nobuild",
    "lint:nobuild": "ng lint",
-    "lint-fix": "yarn build:lint && ng lint --fix=true",
+    "lint-fix": "npm run build:lint && ng lint --fix=true",
    "docs:lint": "ts-node --project ./lint/tsconfig.json ./lint/generate-docs.ts",
    "e2e": "cross-env NODE_ENV=production ng e2e",
    "clean:dev:config": "rimraf src/assets/config.json",
@@ -36,8 +36,8 @@
    "clean:json": "rimraf *.records.json",
    "clean:node": "rimraf node_modules",
    "clean:cli": "rimraf .angular/cache",
-    "clean:prod": "yarn run clean:dist && yarn run clean:log && yarn run clean:doc && yarn run clean:coverage && yarn run clean:json",
-    "clean": "yarn run clean:prod && yarn run clean:dev:config && yarn run clean:cli && yarn run clean:node",
+    "clean:prod": "npm run clean:dist && npm run clean:log && npm run clean:doc && npm run clean:coverage && npm run clean:json",
+    "clean": "npm run clean:prod && npm run clean:dev:config && npm run clean:cli && npm run clean:node",
    "sync-i18n": "ts-node --project ./tsconfig.ts-node.json scripts/sync-i18n-files.ts",
    "build:mirador": "webpack --config webpack/webpack.mirador.config.ts",
    "merge-i18n": "ts-node --project ./tsconfig.ts-node.json scripts/merge-i18n-files.ts",
@@ -46,7 +46,7 @@
    "env:yaml": "ts-node --project ./tsconfig.ts-node.json scripts/env-to-yaml.ts",
    "base-href": "ts-node --project ./tsconfig.ts-node.json scripts/base-href.ts",
    "check-circ-deps": "npx madge --exclude '(bitstream|bundle|collection|config-submission-form|eperson|item|version)\\.model\\.ts$' --circular --extensions ts ./",
-    "postinstall": "yarn build:lint || echo 'Skipped DSpace ESLint plugins.'"
+    "postinstall": "npm run build:lint || echo 'Skipped DSpace ESLint plugins.'"
  },
  "browser": {
    "fs": false,
@@ -55,10 +55,45 @@
    "https": false
  },
  "private": true,
-  "resolutions": {
-    "minimist": "^1.2.5",
-    "webdriver-manager": "^12.1.8",
-    "ts-node": "10.2.1"
+  "overrides": {
+    "@kolkov/ngx-gallery": {
+        "@angular/animations": "^17.3.11",
+        "@angular/common": "^17.3.11",
+        "@angular/core": "^17.3.11"
+    },
+    "@ng-bootstrap/ng-bootstrap": {
+        "@angular/common": "^17.3.11",
+        "@angular/core": "^17.3.11",
+        "@angular/forms": "^17.3.11",
+        "@angular/localize": "^17.3.11"
+    },
+    "@ng-dynamic-forms/core": {
+        "@angular/common": "^17.3.11",
+        "@angular/core": "^17.3.11",
+        "@angular/forms": "^17.3.11"
+    },
+    "@ng-dynamic-forms/ui-ng-bootstrap": {
+        "ngx-mask": "14.2.4"
+    },
+    "@ngtools/webpack": {
+        "@angular/compiler-cli": "^17.3.11",
+        "typescript": "~5.3.3"
+    },
+    "@nicky-lenaers/ngx-scroll-to": {
+        "@angular/common": "^17.3.11",
+        "@angular/core": "^17.3.11"
+    },
+    "eslint-plugin-unused-imports": {
+        "@typescript-eslint/eslint-plugin": "^7.2.0"
+    },
+    "ng2-file-upload": {
+        "@angular/common": "^17.3.11",
+        "@angular/core": "^17.3.11"
+    },
+    "ngx-infinite-scroll": {
+        "@angular/common": "^17.3.11",
+        "@angular/core": "^17.3.11"
+    }
  },
  "dependencies": {
    "@angular/animations": "^17.3.11",
@@ -67,7 +102,7 @@
    "@angular/compiler": "^17.3.11",
    "@angular/core": "^17.3.11",
    "@angular/forms": "^17.3.11",
-    "@angular/localize": "17.3.11",
+    "@angular/localize": "^17.3.11",
    "@angular/platform-browser": "^17.3.11",
    "@angular/platform-browser-dynamic": "^17.3.11",
    "@angular/platform-server": "^17.3.11",
@@ -88,7 +123,7 @@
    "@types/grecaptcha": "^3.0.4",
    "angular-idle-preload": "3.0.0",
    "angulartics2": "^12.2.0",
-    "axios": "^1.6.0",
+    "axios": "^1.7.4",
    "bootstrap": "^4.6.1",
    "cerialize": "0.1.18",
    "cli-progress": "^3.12.0",
@@ -176,8 +211,8 @@
    "deep-freeze": "0.0.1",
    "eslint": "^8.39.0",
    "eslint-plugin-deprecation": "^1.4.1",
-    "eslint-plugin-dspace-angular-html": "link:./lint/dist/src/rules/html",
-    "eslint-plugin-dspace-angular-ts": "link:./lint/dist/src/rules/ts",
+    "eslint-plugin-dspace-angular-html": "file:./lint/dist/src/rules/html",
+    "eslint-plugin-dspace-angular-ts": "file:./lint/dist/src/rules/ts",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-import-newlines": "^1.3.1",
    "eslint-plugin-jsdoc": "^45.0.0",
@@ -185,7 +220,7 @@
    "eslint-plugin-lodash": "^7.4.0",
    "eslint-plugin-rxjs": "^5.0.3",
    "eslint-plugin-simple-import-sort": "^10.0.0",
-    "eslint-plugin-unused-imports": "^2.0.0",
+    "eslint-plugin-unused-imports": "^3.2.0",
    "express-static-gzip": "^2.1.7",
    "jasmine": "^3.8.0",
    "jasmine-core": "^3.8.0",
@@ -213,7 +248,7 @@
    "sass-resources-loader": "^2.2.5",
    "ts-node": "^8.10.2",
    "typescript": "~5.3.3",
-    "webpack": "5.90.3",
+    "webpack": "5.94.0",
    "webpack-bundle-analyzer": "^4.8.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
--- a/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.ts
+++ b/src/app/admin/admin-registries/metadata-registry/metadata-registry.component.ts
@@ -4,7 +4,10 @@ import {
  NgForOf,
  NgIf,
 } from '@angular/common';
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnDestroy,
+} from '@angular/core';
 import {
  Router,
  RouterLink,
@@ -60,7 +63,7 @@ import { MetadataSchemaFormComponent } from './metadata-schema-form/metadata-sch
 * A component used for managing all existing metadata schemas within the repository.
 * The admin can create, edit or delete metadata schemas here.
 */
-export class MetadataRegistryComponent {
+export class MetadataRegistryComponent implements OnDestroy {

  /**
   * A list of all the current metadata schemas within the repository
--- a/src/app/admin/admin-reports/filtered-collections/filtered-collections.component.ts
+++ b/src/app/admin/admin-reports/filtered-collections/filtered-collections.component.ts
@@ -4,6 +4,7 @@ import {
 } from '@angular/common';
 import {
  Component,
+  OnInit,
  ViewChild,
 } from '@angular/core';
 import {
@@ -40,7 +41,7 @@ import { FilteredCollections } from './filtered-collections.model';
  ],
  standalone: true,
 })
-export class FilteredCollectionsComponent {
+export class FilteredCollectionsComponent implements OnInit {

  queryForm: FormGroup;
  results: FilteredCollections = new FilteredCollections();
--- a/src/app/admin/admin-reports/filtered-items/filtered-items.component.ts
+++ b/src/app/admin/admin-reports/filtered-items/filtered-items.component.ts
@@ -5,6 +5,7 @@ import {
 } from '@angular/common';
 import {
  Component,
+  OnInit,
  ViewChild,
 } from '@angular/core';
 import {
@@ -66,7 +67,7 @@ import { QueryPredicate } from './query-predicate.model';
  ],
  standalone: true,
 })
-export class FilteredItemsComponent {
+export class FilteredItemsComponent implements OnInit {

  collections: OptionVO[];
  presetQueries: PresetQuery[];
@@ -90,7 +91,7 @@ export class FilteredItemsComponent {
    private formBuilder: FormBuilder,
    private restService: DspaceRestService) {}

-  ngOnInit() {
+  ngOnInit(): void {
    this.loadCollections();
    this.loadPresetQueries();
    this.loadMetadataFields();
--- a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/collection-search-result/collection-admin-search-result-grid-element.component.ts
+++ b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/collection-search-result/collection-admin-search-result-grid-element.component.ts
@@ -1,4 +1,7 @@
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
 import { RouterLink } from '@angular/router';

 import { getCollectionEditRoute } from '../../../../../collection-page/collection-page-routing-paths';
@@ -21,10 +24,10 @@ import { SearchResultGridElementComponent } from '../../../../../shared/object-g
 /**
 * The component for displaying a list element for a collection search result on the admin search page
 */
-export class CollectionAdminSearchResultGridElementComponent extends SearchResultGridElementComponent<CollectionSearchResult, Collection> {
+export class CollectionAdminSearchResultGridElementComponent extends SearchResultGridElementComponent<CollectionSearchResult, Collection> implements OnInit {
  editPath: string;

-  ngOnInit() {
+  ngOnInit(): void {
    super.ngOnInit();
    this.editPath = getCollectionEditRoute(this.dso.uuid);
  }
--- a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/community-search-result/community-admin-search-result-grid-element.component.ts
+++ b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-grid-element/community-search-result/community-admin-search-result-grid-element.component.ts
@@ -1,4 +1,7 @@
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
 import { RouterLink } from '@angular/router';

 import { getCommunityEditRoute } from '../../../../../community-page/community-page-routing-paths';
@@ -21,10 +24,10 @@ import { SearchResultGridElementComponent } from '../../../../../shared/object-g
 /**
 * The component for displaying a list element for a community search result on the admin search page
 */
-export class CommunityAdminSearchResultGridElementComponent extends SearchResultGridElementComponent<CommunitySearchResult, Community> {
+export class CommunityAdminSearchResultGridElementComponent extends SearchResultGridElementComponent<CommunitySearchResult, Community> implements OnInit {
  editPath: string;

-  ngOnInit() {
+  ngOnInit(): void {
    super.ngOnInit();
    this.editPath = getCommunityEditRoute(this.dso.uuid);
  }
--- a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/collection-search-result/collection-admin-search-result-list-element.component.ts
+++ b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/collection-search-result/collection-admin-search-result-list-element.component.ts
@@ -1,4 +1,7 @@
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';

@@ -22,10 +25,10 @@ import { SearchResultListElementComponent } from '../../../../../shared/object-l
 /**
 * The component for displaying a list element for a collection search result on the admin search page
 */
-export class CollectionAdminSearchResultListElementComponent extends SearchResultListElementComponent<CollectionSearchResult, Collection> {
+export class CollectionAdminSearchResultListElementComponent extends SearchResultListElementComponent<CollectionSearchResult, Collection> implements OnInit {
  editPath: string;

-  ngOnInit() {
+  ngOnInit(): void {
    super.ngOnInit();
    this.editPath = getCollectionEditRoute(this.dso.uuid);
  }
--- a/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/community-search-result/community-admin-search-result-list-element.component.ts
+++ b/src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/community-search-result/community-admin-search-result-list-element.component.ts
@@ -1,4 +1,7 @@
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';

@@ -22,10 +25,10 @@ import { SearchResultListElementComponent } from '../../../../../shared/object-l
 /**
 * The component for displaying a list element for a community search result on the admin search page
 */
-export class CommunityAdminSearchResultListElementComponent extends SearchResultListElementComponent<CommunitySearchResult, Community> {
+export class CommunityAdminSearchResultListElementComponent extends SearchResultListElementComponent<CommunitySearchResult, Community> implements OnInit {
  editPath: string;

-  ngOnInit() {
+  ngOnInit(): void {
    super.ngOnInit();
    this.editPath = getCommunityEditRoute(this.dso.uuid);
  }
--- a/src/app/collection-page/edit-collection-page/collection-curate/collection-curate.component.ts
+++ b/src/app/collection-page/edit-collection-page/collection-curate/collection-curate.component.ts
@@ -1,5 +1,8 @@
 import { AsyncPipe } from '@angular/common';
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
@@ -28,7 +31,7 @@ import { hasValue } from '../../../shared/empty.util';
  ],
  standalone: true,
 })
-export class CollectionCurateComponent {
+export class CollectionCurateComponent implements OnInit {
  dsoRD$: Observable<RemoteData<Collection>>;
  collectionName$: Observable<string>;

--- a/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.ts
+++ b/src/app/collection-page/edit-collection-page/collection-source/collection-source-controls/collection-source-controls.component.ts
@@ -95,7 +95,7 @@ export class CollectionSourceControlsComponent implements OnInit, OnDestroy {
  ) {
  }

-  ngOnInit() {
+  ngOnInit(): void {
    // ensure the contentSource gets updated after being set to stale
    this.contentSource$ = this.collectionService.findByHref(this.collection._links.self.href, false).pipe(
      getAllSucceededRemoteDataPayload(),
--- a/src/app/core/submission/submission-duplicate-data.service.ts
+++ b/src/app/core/submission/submission-duplicate-data.service.ts
@@ -1,5 +1,8 @@
 /* eslint-disable max-classes-per-file */
-import { Injectable } from '@angular/core';
+import {
+  Injectable,
+  OnDestroy,
+} from '@angular/core';
 import { Observable } from 'rxjs';

 import { Duplicate } from '../../shared/object-list/duplicate-data/duplicate.model';
@@ -33,7 +36,8 @@ import { HALEndpointService } from '../shared/hal-endpoint.service';
 *
 */
@Injectable({ providedIn: 'root' })
-export class SubmissionDuplicateDataService extends BaseDataService<Duplicate> implements SearchData<Duplicate> {
+export class SubmissionDuplicateDataService extends BaseDataService<Duplicate>
+  implements SearchData<Duplicate>, OnDestroy {

  /**
   * The ResponseParsingService constructor name
--- a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/person/person-search-result-list-element.component.ts
+++ b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/person/person-search-result-list-element.component.ts
@@ -7,6 +7,7 @@ import {
 import {
  Component,
  Inject,
+  OnInit,
 } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
@@ -36,7 +37,7 @@ import { ThemedThumbnailComponent } from '../../../../../thumbnail/themed-thumbn
 /**
 * The component for displaying a list element for an item search result of the type Person
 */
-export class PersonSearchResultListElementComponent extends ItemSearchResultListElementComponent {
+export class PersonSearchResultListElementComponent extends ItemSearchResultListElementComponent implements OnInit {

  public constructor(
    protected truncatableService: TruncatableService,
--- a/src/app/forgot-password/forgot-password-form/forgot-password-form.component.ts
+++ b/src/app/forgot-password/forgot-password-form/forgot-password-form.component.ts
@@ -2,7 +2,10 @@ import {
  AsyncPipe,
  NgIf,
 } from '@angular/common';
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
 import {
  ActivatedRoute,
  Router,
@@ -45,7 +48,7 @@ import { BrowserOnlyPipe } from '../../shared/utils/browser-only.pipe';
 /**
 * Component for a user to enter a new password for a forgot token.
 */
-export class ForgotPasswordFormComponent {
+export class ForgotPasswordFormComponent implements OnInit {

  registration$: Observable<Registration>;

--- a/src/app/home-page/recent-item-list/recent-item-list.component.ts
+++ b/src/app/home-page/recent-item-list/recent-item-list.component.ts
@@ -10,6 +10,7 @@ import {
  Component,
  ElementRef,
  Inject,
+  OnDestroy,
  OnInit,
  PLATFORM_ID,
 } from '@angular/core';
@@ -62,7 +63,7 @@ import { VarDirective } from '../../shared/utils/var.directive';
  standalone: true,
  imports: [VarDirective, NgIf, NgClass, NgFor, ListableObjectComponentLoaderComponent, ErrorComponent, ThemedLoadingComponent, AsyncPipe, TranslateModule],
 })
-export class RecentItemListComponent implements OnInit {
+export class RecentItemListComponent implements OnInit, OnDestroy {
  itemRD$: Observable<RemoteData<PaginatedList<Item>>>;
  paginationConfig: PaginationComponentOptions;
  sortConfig: SortOptions;
--- a/src/app/item-page/edit-item-page/item-register-doi/item-register-doi.component.ts
+++ b/src/app/item-page/edit-item-page/item-register-doi/item-register-doi.component.ts
@@ -3,7 +3,10 @@ import {
  NgForOf,
  NgIf,
 } from '@angular/common';
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
 import {
  ActivatedRoute,
  Router,
@@ -47,7 +50,7 @@ import { AbstractSimpleItemActionComponent } from '../simple-item-action/abstrac
 /**
 * Component responsible for rendering the Item Register DOI page
 */
-export class ItemRegisterDoiComponent extends AbstractSimpleItemActionComponent {
+export class ItemRegisterDoiComponent extends AbstractSimpleItemActionComponent implements OnInit {

  protected messageKey = 'register-doi';
  doiToUpdateMessage = 'item.edit.' + this.messageKey + '.to-update';
--- a/src/app/item-page/edit-item-page/item-status/item-status.component.ts
+++ b/src/app/item-page/edit-item-page/item-status/item-status.component.ts
@@ -7,6 +7,7 @@ import {
 import {
  ChangeDetectionStrategy,
  Component,
+  OnDestroy,
  OnInit,
 } from '@angular/core';
 import {
@@ -79,7 +80,7 @@ import { ItemOperation } from '../item-operation/itemOperation.model';
 /**
 * Component for displaying an item's status
 */
-export class ItemStatusComponent implements OnInit {
+export class ItemStatusComponent implements OnInit, OnDestroy {

  /**
   * The item to display the status for
--- a/src/app/item-page/edit-item-page/item-version-history/item-version-history.component.ts
+++ b/src/app/item-page/edit-item-page/item-version-history/item-version-history.component.ts
@@ -2,7 +2,10 @@ import {
  AsyncPipe,
  NgIf,
 } from '@angular/common';
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -28,7 +31,7 @@ import { ItemVersionsComponent } from '../../versions/item-versions.component';
 /**
 * Component for listing and managing an item's version history
 */
-export class ItemVersionHistoryComponent {
+export class ItemVersionHistoryComponent implements OnInit {
  /**
   * The item to display the version history for
   */
--- a/src/app/item-page/orcid-page/orcid-queue/orcid-queue.component.ts
+++ b/src/app/item-page/orcid-page/orcid-queue/orcid-queue.component.ts
@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import {
  Component,
  Input,
+  OnChanges,
  OnDestroy,
  OnInit,
  SimpleChanges,
@@ -56,7 +57,7 @@ import { PaginationComponentOptions } from '../../../shared/pagination/paginatio
  ],
  standalone: true,
 })
-export class OrcidQueueComponent implements OnInit, OnDestroy {
+export class OrcidQueueComponent implements OnInit, OnDestroy, OnChanges {

  /**
   * The item for which showing the orcid settings
--- a/src/app/item-page/simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component.html
+++ b/src/app/item-page/simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component.html
@@ -1,7 +1,9 @@
 <ng-container *ngIf="relationTypes.length > 1">
-  <ul ngbNav #tabs="ngbNav" [destroyOnHide]="true" [activeId]="activeTab$ | async" (navChange)="onTabChange($event)" class="nav-tabs">
-    <li *ngFor="let relationType of relationTypes" [ngbNavItem]="relationType.filter" rel="presentation">
-      <a ngbNavLink>{{'item.page.relationships.' + relationType.label | translate}}</a>
+  <ul ngbNav #tabs="ngbNav" [destroyOnHide]="true" [activeId]="activeTab$ | async" (navChange)="onTabChange($event)" class="nav-tabs" role="tablist">
+    <li *ngFor="let relationType of relationTypes" [ngbNavItem]="relationType.filter" role="presentation">
+      <a ngbNavLink role="tab">
+        {{'item.page.relationships.' + relationType.label | translate}}
+      </a>
      <ng-template ngbNavContent>
        <div class="mt-4">
          <ds-related-entities-search [item]="item"
--- a/src/app/item-page/simple/related-items/related-items-component.ts
+++ b/src/app/item-page/simple/related-items/related-items-component.ts
@@ -10,6 +10,7 @@ import {
  ElementRef,
  Inject,
  Input,
+  OnInit,
  PLATFORM_ID,
 } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
@@ -43,7 +44,7 @@ import { AbstractIncrementalListComponent } from '../abstract-incremental-list/a
 * This component is used for displaying relations between items
 * It expects a parent item and relationship type, as well as a label to display on top
 */
-export class RelatedItemsComponent extends AbstractIncrementalListComponent<Observable<RemoteData<PaginatedList<Item>>>> {
+export class RelatedItemsComponent extends AbstractIncrementalListComponent<Observable<RemoteData<PaginatedList<Item>>>> implements OnInit {

  /**
   * The parent of the list of related items to display
--- a/src/app/item-page/versions/item-versions.component.html
+++ b/src/app/item-page/versions/item-versions.component.html
@@ -1,16 +1,16 @@
-<div *ngVar="(versionsRD$ | async)?.payload as versions">
-  <div *ngVar="(versionRD$ | async)?.payload as itemVersion">
-    <div class="mb-2" *ngIf="versions?.page?.length > 0 || displayWhenEmpty">
+<div *ngIf="(versionsDTO$ | async) as versionsDTO; else noItemVersion">
+  <div *ngIf="(versionRD$ | async)?.payload as itemVersion">
+    <div class="mb-2" *ngIf="versionsDTO.versionDTOs.length > 0 || displayWhenEmpty">
      <h2 *ngIf="displayTitle" class="h4">{{"item.version.history.head" | translate}}</h2>
-      <ds-alert [type]="AlertTypeEnum.Info" *ngIf="itemVersion">
+      <ds-alert [type]="AlertTypeEnum.Info">
        {{ "item.version.history.selected.alert" | translate : {version: itemVersion.version} }}
      </ds-alert>
-      <ds-pagination *ngIf="versions?.page?.length > 0"
+      <ds-pagination *ngIf="versionsDTO.versionDTOs.length > 0"
                     (paginationChange)="onPageChange()"
                     [hideGear]="true"
                     [hidePagerWhenSinglePage]="true"
                     [paginationOptions]="options"
-                     [collectionSize]="versions?.totalElements"
+                     [collectionSize]="versionsDTO.totalElements"
                     [retainScrollPosition]="true">
        <table class="table table-striped table-bordered align-middle my-2">
          <thead>
@@ -22,10 +22,10 @@
          </tr>
          </thead>
          <tbody>
-          <tr *ngFor="let version of versions?.page" [id]="'version-row-' + version.id">
+          <tr *ngFor="let versionDTO of versionsDTO.versionDTOs" [id]="'version-row-' + versionDTO.version.id">
            <td class="version-row-element-version">
              <ds-item-versions-row-element-version [hasDraftVersion]="hasDraftVersion$ | async"
-                                                    [version]="version"
+                                                    [version]="versionDTO.version"
                                                    [item]="item" [displayActions]="displayActions"
                                                    [itemVersion]="itemVersion"
                                                    [versionBeingEditedNumber]="versionBeingEditedNumber"
@@ -33,15 +33,15 @@
              ></ds-item-versions-row-element-version>
            </td>
            <td class="version-row-element-editor" *ngIf="(showSubmitter$ | async)">
-              {{version?.submitterName}}
+              {{versionDTO.version.submitterName}}
            </td>
            <td class="version-row-element-date">
-              {{version?.created | date : 'yyyy-MM-dd HH:mm:ss'}}
+              {{versionDTO.version.created | date : 'yyyy-MM-dd HH:mm:ss'}}
            </td>
            <td class="version-row-element-summary">
              <div class="float-left">
-                <ng-container *ngIf="isThisBeingEdited(version); then editSummary else showSummary"></ng-container>
-                <ng-template #showSummary>{{version?.summary}}</ng-template>
+                <ng-container *ngIf="isThisBeingEdited(versionDTO.version); then editSummary else showSummary"></ng-container>
+                <ng-template #showSummary>{{versionDTO.version.summary}}</ng-template>
                <ng-template #editSummary>
                  <input [attr.aria-label]="'item.version.history.table.action.editSummary' | translate"
                         [(ngModel)]="versionBeingEditedSummary" (keyup.enter)="onSummarySubmit()"
@@ -49,43 +49,44 @@
                </ng-template>
              </div>

-              <div class="float-right btn-group edit-field space-children-mr" *ngIf="displayActions">
-                <!--DISCARD EDIT -->
-                <ng-container *ngIf="(canEditVersion$(version) | async) && isThisBeingEdited(version)">
-                  <button class="btn btn-sm"
-                          [ngClass]="isThisBeingEdited(version) ? 'btn-outline-warning' : 'btn-outline-primary'"
+              <div class="float-right btn-group edit-field space-children-mr" *ngIf="displayActions && versionDTO.canEditVersion | async">
+                <ng-container *ngIf="isThisBeingEdited(versionDTO.version); else notThisBeingEdited">
+                  <!--DISCARD EDIT-->
+                  <button class="btn btn-sm btn-outline-warning"
                          (click)="disableVersionEditing()"
                          title="{{'item.version.history.table.action.discardSummary' | translate}}">
                    <i class="fas fa-undo-alt fa-fw"></i>
                  </button>
-                </ng-container>
-                <!--EDIT / SAVE-->
-                <ng-container *ngIf="canEditVersion$(version) | async">
-                  <button class="btn btn-outline-primary btn-sm version-row-element-edit"
-                          *ngIf="!isThisBeingEdited(version)"
-                          [disabled]="isAnyBeingEdited()"
-                          (click)="enableVersionEditing(version)"
-                          title="{{'item.version.history.table.action.editSummary' | translate}}">
-                    <i class="fas fa-edit fa-fw"></i>
-                  </button>
+                  <!--SAVE-->
                  <button class="btn btn-outline-success btn-sm"
-                          *ngIf="isThisBeingEdited(version)"
                          (click)="onSummarySubmit()"
                          title="{{'item.version.history.table.action.saveSummary' | translate}}">
                    <i class="fas fa-check fa-fw"></i>
                  </button>
                </ng-container>
+                <ng-template #notThisBeingEdited>
+                  <!--EDIT-->
+                  <button class="btn btn-outline-primary btn-sm version-row-element-edit"
+                          [disabled]="isAnyBeingEdited()"
+                          (click)="enableVersionEditing(versionDTO.version)"
+                          title="{{'item.version.history.table.action.editSummary' | translate}}">
+                    <i class="fas fa-edit fa-fw"></i>
+                  </button>
+                </ng-template>
              </div>
-
-
            </td>
          </tr>
          </tbody>
        </table>
        <div>*&nbsp;{{"item.version.history.selected" | translate}}</div>
      </ds-pagination>
-      <ds-alert *ngIf="!itemVersion || versions?.page?.length === 0" [content]="'item.version.history.empty'"
-                [type]="AlertTypeEnum.Info"></ds-alert>
    </div>
  </div>
 </div>
+
+<ng-template #noItemVersion>
+  <ds-alert *ngIf="displayWhenEmpty"
+            [content]="'item.version.history.empty'"
+            [type]="AlertTypeEnum.Info">
+  </ds-alert>
+</ng-template>
--- a/src/app/item-page/versions/item-versions.component.ts
+++ b/src/app/item-page/versions/item-versions.component.ts
@@ -12,13 +12,11 @@ import {
  OnInit,
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { RouterLink } from '@angular/router';
 import {
  TranslateModule,
  TranslateService,
 } from '@ngx-translate/core';
 import {
-  BehaviorSubject,
  combineLatest,
  Observable,
  Subscription,
@@ -41,7 +39,6 @@ import { PaginationService } from '../../core/pagination/pagination.service';
 import { Item } from '../../core/shared/item.model';
 import {
  getAllSucceededRemoteData,
-  getAllSucceededRemoteDataPayload,
  getFirstCompletedRemoteData,
  getFirstSucceededRemoteData,
  getFirstSucceededRemoteDataPayload,
@@ -60,16 +57,35 @@ import { PaginationComponent } from '../../shared/pagination/pagination.componen
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { PaginatedSearchOptions } from '../../shared/search/models/paginated-search-options.model';
 import { followLink } from '../../shared/utils/follow-link-config.model';
-import { VarDirective } from '../../shared/utils/var.directive';
-import { getItemPageRoute } from '../item-page-routing-paths';
 import { ItemVersionsRowElementVersionComponent } from './item-versions-row-element-version/item-versions-row-element-version.component';

+interface VersionsDTO {
+  totalElements: number;
+  versionDTOs: VersionDTO[];
+}
+
+interface VersionDTO {
+  version: Version;
+  canEditVersion: Observable<boolean>;
+}
+
@Component({
  selector: 'ds-item-versions',
  templateUrl: './item-versions.component.html',
  styleUrls: ['./item-versions.component.scss'],
  standalone: true,
-  imports: [VarDirective, NgIf, AlertComponent, PaginationComponent, NgFor, RouterLink, NgClass, FormsModule, AsyncPipe, DatePipe, TranslateModule, ItemVersionsRowElementVersionComponent],
+  imports: [
+    AlertComponent,
+    AsyncPipe,
+    DatePipe,
+    FormsModule,
+    ItemVersionsRowElementVersionComponent,
+    NgClass,
+    NgFor,
+    NgIf,
+    PaginationComponent,
+    TranslateModule,
+  ],
 })

 /**
@@ -128,13 +144,7 @@ export class ItemVersionsComponent implements OnDestroy, OnInit {
  /**
   * The version history's list of versions
   */
-  versionsRD$: BehaviorSubject<RemoteData<PaginatedList<Version>>> = new BehaviorSubject<RemoteData<PaginatedList<Version>>>(null);
-
-  /**
-   * Verify if the list of versions has at least one e-person to display
-   * Used to hide the "Editor" column when no e-persons are present to display
-   */
-  hasEpersons$: Observable<boolean>;
+  versionsDTO$: Observable<VersionsDTO>;

  /**
   * Verify if there is an inprogress submission in the version history
@@ -162,15 +172,6 @@ export class ItemVersionsComponent implements OnDestroy, OnInit {
    pageSize: this.pageSize,
  });

-  /**
-   * The routes to the versions their item pages
-   * Key: Item ID
-   * Value: Route to item page
-   */
-  itemPageRoutes$: Observable<{
-    [itemId: string]: string
-  }>;
-
  /**
   * The number of the version whose summary is currently being edited
   */
@@ -186,9 +187,6 @@ export class ItemVersionsComponent implements OnDestroy, OnInit {
   */
  versionBeingEditedSummary: string;

-  canCreateVersion$: Observable<boolean>;
-  createVersionTitle$: Observable<string>;
-
  constructor(private versionHistoryService: VersionHistoryDataService,
              private versionService: VersionDataService,
              private paginationService: PaginationService,
@@ -257,8 +255,7 @@ export class ItemVersionsComponent implements OnDestroy, OnInit {
        this.notificationsService.warning(null, this.translateService.get(failureMessageKey, { 'version': this.versionBeingEditedNumber }));
      }
      this.disableVersionEditing();
-    },
-    );
+    });
  }

  /**
@@ -305,16 +302,22 @@ export class ItemVersionsComponent implements OnDestroy, OnInit {
   */
  getAllVersions(versionHistory$: Observable<VersionHistory>): void {
    const currentPagination = this.paginationService.getCurrentPagination(this.options.id, this.options);
-    combineLatest([versionHistory$, currentPagination]).pipe(
+    this.versionsDTO$ = combineLatest([versionHistory$, currentPagination]).pipe(
      switchMap(([versionHistory, options]: [VersionHistory, PaginationComponentOptions]) => {
        return this.versionHistoryService.getVersions(versionHistory.id,
          new PaginatedSearchOptions({ pagination: Object.assign({}, options, { currentPage: options.currentPage }) }),
          false, true, followLink('item'), followLink('eperson'));
      }),
      getFirstCompletedRemoteData(),
-    ).subscribe((res: RemoteData<PaginatedList<Version>>) => {
-      this.versionsRD$.next(res);
-    });
+      getRemoteDataPayload(),
+      map((versions: PaginatedList<Version>) => ({
+        totalElements: versions.totalElements,
+        versionDTOs: (versions?.page ?? []).map((version: Version) => ({
+          version: version,
+          canEditVersion: this.canEditVersion$(version),
+        })),
+      })),
+    );
  }

  /**
@@ -348,22 +351,6 @@ export class ItemVersionsComponent implements OnDestroy, OnInit {
      );

      this.getAllVersions(this.versionHistory$);
-      this.hasEpersons$ = this.versionsRD$.pipe(
-        getAllSucceededRemoteData(),
-        getRemoteDataPayload(),
-        hasValueOperator(),
-        map((versions: PaginatedList<Version>) => versions.page.filter((version: Version) => version.eperson !== undefined).length > 0),
-        startWith(false),
-      );
-      this.itemPageRoutes$ = this.versionsRD$.pipe(
-        getAllSucceededRemoteDataPayload(),
-        switchMap((versions) => combineLatest(versions.page.map((version) => version.item.pipe(getAllSucceededRemoteDataPayload())))),
-        map((versions) => {
-          const itemPageRoutes = {};
-          versions.forEach((item) => itemPageRoutes[item.uuid] = getItemPageRoute(item));
-          return itemPageRoutes;
-        }),
-      );
    }
  }

@@ -380,3 +367,4 @@ export class ItemVersionsComponent implements OnDestroy, OnInit {
  }

 }
+
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
@@ -15,8 +15,7 @@
       [attr.aria-expanded]="isActive"
       [attr.aria-controls]="expandableNavbarSectionId(section.id)"
       class="d-flex flex-row flex-nowrap align-items-center gapx-1 ds-menu-toggler-wrapper"
-       [class.disabled]="section.model?.disabled"
-       id="browseDropdown">
+       [class.disabled]="section.model?.disabled">
      <span class="flex-fill">
        <ng-container
          *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
--- a/src/app/notifications/qa/project-entry-import-modal/project-entry-import-modal.component.ts
+++ b/src/app/notifications/qa/project-entry-import-modal/project-entry-import-modal.component.ts
@@ -6,6 +6,7 @@ import {
  Component,
  EventEmitter,
  Input,
+  OnDestroy,
  OnInit,
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
@@ -110,7 +111,7 @@ export interface QualityAssuranceEventData {
 * Component to display a modal window for linking a project to an Quality Assurance event
 * Shows information about the selected project and a selectable list.
 */
-export class ProjectEntryImportModalComponent implements OnInit {
+export class ProjectEntryImportModalComponent implements OnInit, OnDestroy {
  /**
   * The external source entry
   */
--- a/src/app/notifications/qa/source/quality-assurance-source.component.ts
+++ b/src/app/notifications/qa/source/quality-assurance-source.component.ts
@@ -5,7 +5,9 @@ import {
  NgIf,
 } from '@angular/common';
 import {
+  AfterViewInit,
  Component,
+  OnDestroy,
  OnInit,
 } from '@angular/core';
 import { RouterLink } from '@angular/router';
@@ -40,7 +42,7 @@ import { NotificationsStateService } from '../../notifications-state.service';
  standalone: true,
  imports: [AlertComponent, NgIf, ThemedLoadingComponent, PaginationComponent, NgFor, RouterLink, AsyncPipe, TranslateModule, DatePipe],
 })
-export class QualityAssuranceSourceComponent implements OnInit {
+export class QualityAssuranceSourceComponent implements OnDestroy, OnInit, AfterViewInit {

  /**
   * The pagination system configuration for HTML listing.
--- a/src/app/notifications/suggestion-targets/publication-claim/publication-claim.component.ts
+++ b/src/app/notifications/suggestion-targets/publication-claim/publication-claim.component.ts
@@ -4,8 +4,10 @@ import {
  NgIf,
 } from '@angular/common';
 import {
+  AfterViewInit,
  Component,
  Input,
+  OnDestroy,
  OnInit,
 } from '@angular/core';
 import {
@@ -50,7 +52,7 @@ import { SuggestionTargetsStateService } from '../suggestion-targets.state.servi
  ],
  standalone: true,
 })
-export class PublicationClaimComponent implements OnInit {
+export class PublicationClaimComponent implements AfterViewInit, OnDestroy, OnInit {

  /**
   * The source for which to list targets
--- a/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
@@ -2,6 +2,7 @@ import { NgIf } from '@angular/common';
 import {
  Component,
  Input,
+  OnInit,
  Optional,
 } from '@angular/core';
 import {
@@ -27,7 +28,7 @@ import { ValueInputComponent } from '../value-input.component';
  standalone: true,
  imports: [FormsModule, NgIf, TranslateModule],
 })
-export class DateValueInputComponent extends ValueInputComponent<string> {
+export class DateValueInputComponent extends ValueInputComponent<string> implements OnInit {
  /**
   * The current value of the date string
   */
@@ -38,7 +39,7 @@ export class DateValueInputComponent extends ValueInputComponent<string> {
   */
  @Input() initialValue;

-  ngOnInit() {
+  ngOnInit(): void {
    this.value = this.initialValue;
  }

--- a/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
@@ -2,6 +2,7 @@ import { NgIf } from '@angular/common';
 import {
  Component,
  Input,
+  OnInit,
  Optional,
 } from '@angular/core';
 import {
@@ -27,7 +28,7 @@ import { ValueInputComponent } from '../value-input.component';
  standalone: true,
  imports: [FormsModule, NgIf, TranslateModule],
 })
-export class StringValueInputComponent extends ValueInputComponent<string> {
+export class StringValueInputComponent extends ValueInputComponent<string> implements OnInit {
  /**
   * The current value of the string
   */
@@ -38,7 +39,7 @@ export class StringValueInputComponent extends ValueInputComponent<string> {
   */
  @Input() initialValue;

-  ngOnInit() {
+  ngOnInit(): void {
    this.value = this.initialValue;
  }

--- a/src/app/process-page/form/process-parameters/process-parameters.component.ts
+++ b/src/app/process-page/form/process-parameters/process-parameters.component.ts
@@ -7,6 +7,7 @@ import {
  EventEmitter,
  Input,
  OnChanges,
+  OnInit,
  Optional,
  Output,
  SimpleChanges,
@@ -39,7 +40,7 @@ import { ParameterSelectComponent } from './parameter-select/parameter-select.co
  standalone: true,
  imports: [NgIf, NgFor, ParameterSelectComponent, TranslateModule],
 })
-export class ProcessParametersComponent implements OnChanges {
+export class ProcessParametersComponent implements OnChanges, OnInit {
  /**
   * The currently selected script
   */
@@ -59,7 +60,7 @@ export class ProcessParametersComponent implements OnChanges {
   */
  parameterValues: ProcessParameter[];

-  ngOnInit() {
+  ngOnInit(): void {
    if (hasValue(this.initialParams)) {
      this.parameterValues = this.initialParams;
    }
--- a/src/app/profile-page/profile-page-security-form/profile-page-security-form.component.ts
+++ b/src/app/profile-page/profile-page-security-form/profile-page-security-form.component.ts
@@ -3,6 +3,7 @@ import {
  Component,
  EventEmitter,
  Input,
+  OnDestroy,
  OnInit,
  Output,
 } from '@angular/core';
@@ -44,7 +45,7 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
 * Component for a user to edit their security information
 * Displays a form containing a password field and a confirmation of the password
 */
-export class ProfilePageSecurityFormComponent implements OnInit {
+export class ProfilePageSecurityFormComponent implements OnDestroy, OnInit {

  /**
   * Emits the validity of the password
--- a/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.ts
+++ b/src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.ts
@@ -8,6 +8,7 @@ import {
  Component,
  Inject,
  Injector,
+  OnInit,
 } from '@angular/core';
 import { Router } from '@angular/router';
 import {
@@ -34,7 +35,7 @@ import { MenuService } from '../../../menu/menu.service';
  standalone: true,
  imports: [NgbDropdownModule, NgbTooltipModule, NgFor, NgIf, NgComponentOutlet, TranslateModule, AsyncPipe],
 })
-export class DsoEditMenuExpandableSectionComponent extends MenuSectionComponent {
+export class DsoEditMenuExpandableSectionComponent extends MenuSectionComponent implements OnInit {

  menuID: MenuID = MenuID.DSO_EDIT;
  itemModel;
--- a/src/app/shared/error/error.component.ts
+++ b/src/app/shared/error/error.component.ts
@@ -1,6 +1,8 @@
 import {
  Component,
  Input,
+  OnDestroy,
+  OnInit,
 } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Subscription } from 'rxjs';
@@ -15,7 +17,7 @@ import { AlertType } from '../alert/alert-type';
  standalone: true,
  imports: [AlertComponent],
 })
-export class ErrorComponent {
+export class ErrorComponent implements OnDestroy, OnInit {

  @Input() message = 'Error...';

@@ -31,7 +33,7 @@ export class ErrorComponent {

  }

-  ngOnInit() {
+  ngOnInit(): void {
    if (this.message === undefined) {
      this.subscription = this.translate.get('error.default').subscribe((message: string) => {
        this.message = message;
@@ -39,7 +41,7 @@ export class ErrorComponent {
    }
  }

-  ngOnDestroy() {
+  ngOnDestroy(): void {
    if (this.subscription !== undefined) {
      this.subscription.unsubscribe();
    }
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.ts
@@ -6,11 +6,13 @@ import {
  NgTemplateOutlet,
 } from '@angular/common';
 import {
+  AfterViewInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ComponentFactoryResolver,
  ContentChildren,
+  DoCheck,
  EventEmitter,
  Inject,
  Input,
@@ -143,7 +145,8 @@ import { DsDynamicLookupRelationModalComponent } from './relation-lookup-modal/d
  ],
  standalone: true,
 })
-export class DsDynamicFormControlContainerComponent extends DynamicFormControlContainerComponent implements OnInit, OnChanges, OnDestroy {
+export class DsDynamicFormControlContainerComponent extends DynamicFormControlContainerComponent
+  implements OnInit, OnChanges, OnDestroy, AfterViewInit, DoCheck {
  @ContentChildren(DynamicTemplateDirective) contentTemplateList: QueryList<DynamicTemplateDirective>;
  // eslint-disable-next-line @angular-eslint/no-input-rename
  @Input('templates') inputTemplateList: QueryList<DynamicTemplateDirective>;
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/onebox/dynamic-onebox.component.ts
@@ -9,6 +9,7 @@ import {
  Component,
  EventEmitter,
  Input,
+  OnDestroy,
  OnInit,
  Output,
  ViewChild,
@@ -92,7 +93,7 @@ import { DynamicOneboxModel } from './dynamic-onebox.model';
  ],
  standalone: true,
 })
-export class DsDynamicOneboxComponent extends DsDynamicVocabularyComponent implements OnInit {
+export class DsDynamicOneboxComponent extends DsDynamicVocabularyComponent implements OnDestroy, OnInit {

  @Input() group: UntypedFormGroup;
  @Input() model: DynamicOneboxModel;
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/selection-tab/dynamic-lookup-relation-selection-tab.component.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/selection-tab/dynamic-lookup-relation-selection-tab.component.ts
@@ -6,6 +6,7 @@ import {
  Component,
  EventEmitter,
  Input,
+  OnInit,
  Output,
 } from '@angular/core';
 import { Router } from '@angular/router';
@@ -59,7 +60,7 @@ import { SearchResult } from '../../../../../search/models/search-result.model';
 /**
 * Tab for inside the lookup model that represents the currently selected relationships
 */
-export class DsDynamicLookupRelationSelectionTabComponent {
+export class DsDynamicLookupRelationSelectionTabComponent implements OnInit {
  /**
   * A string that describes the type of relationship
   */
@@ -122,7 +123,7 @@ export class DsDynamicLookupRelationSelectionTabComponent {
  /**
   * Set up the selection and pagination on load
   */
-  ngOnInit() {
+  ngOnInit(): void {
    this.resetRoute();
    this.selectionRD$ = this.searchConfigService.paginatedSearchOptions
      .pipe(
--- a/src/app/shared/form/number-picker/number-picker.component.ts
+++ b/src/app/shared/form/number-picker/number-picker.component.ts
@@ -4,6 +4,7 @@ import {
  Component,
  EventEmitter,
  Input,
+  OnChanges,
  OnInit,
  Output,
  SimpleChanges,
@@ -36,7 +37,7 @@ import { isEmpty } from '../../empty.util';
  standalone: true,
 })

-export class NumberPickerComponent implements OnInit, ControlValueAccessor {
+export class NumberPickerComponent implements OnChanges, OnInit, ControlValueAccessor {
  @Input() id: string;
  @Input() step: number;
  @Input() min: number;
--- a/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
+++ b/src/app/shared/form/vocabulary-treeview/vocabulary-treeview.component.html
@@ -3,6 +3,7 @@
  <div class="col-12">
    <div class="input-group">
      <input type="text" class="form-control" [(ngModel)]="searchText" (keyup.enter)="search()"
+             [attr.aria-label]="'vocabulary-treeview.search.form.search-placeholder' | translate"
             [placeholder]="'vocabulary-treeview.search.form.search-placeholder' | translate">
      <div class="input-group-append" id="button-addon4">
        <button class="btn btn-outline-primary" type="button" (click)="search()" [disabled]="!isSearchEnabled()">
--- a/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.ts
+++ b/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.ts
@@ -5,6 +5,8 @@ import {
 import {
  Component,
  Input,
+  OnDestroy,
+  OnInit,
 } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import {
@@ -35,7 +37,7 @@ import { AccessStatusObject } from './access-status.model';
 /**
 * Component rendering the access status of an item as a badge
 */
-export class AccessStatusBadgeComponent {
+export class AccessStatusBadgeComponent implements OnDestroy, OnInit {

  @Input() object: DSpaceObject;
  accessStatus$: Observable<string>;
--- a/src/app/shared/object-detail/my-dspace-result-detail-element/workflow-item-search-result/workflow-item-search-result-detail-element.component.ts
+++ b/src/app/shared/object-detail/my-dspace-result-detail-element/workflow-item-search-result/workflow-item-search-result-detail-element.component.ts
@@ -1,4 +1,7 @@
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
 import { Observable } from 'rxjs';
 import { find } from 'rxjs/operators';
 import { Context } from 'src/app/core/shared/context.model';
@@ -29,7 +32,7 @@ import { SearchResultDetailElementComponent } from '../search-result-detail-elem
 })

@listableObjectComponent(WorkflowItemSearchResult, ViewMode.DetailedListElement)
-export class WorkflowItemSearchResultDetailElementComponent extends SearchResultDetailElementComponent<WorkflowItemSearchResult, WorkflowItem> {
+export class WorkflowItemSearchResultDetailElementComponent extends SearchResultDetailElementComponent<WorkflowItemSearchResult, WorkflowItem> implements OnInit {

  /**
   * The item object that belonging to the result object
@@ -51,7 +54,7 @@ export class WorkflowItemSearchResultDetailElementComponent extends SearchResult
  /**
   * Initialize all instance variables
   */
-  ngOnInit() {
+  ngOnInit(): void {
    super.ngOnInit();
    this.linkService.resolveLink(this.dso, followLink('item'));
    this.initItem(this.dso.item as Observable<RemoteData<Item>>);
--- a/src/app/shared/object-detail/my-dspace-result-detail-element/workspace-item-search-result/workspace-item-search-result-detail-element.component.ts
+++ b/src/app/shared/object-detail/my-dspace-result-detail-element/workspace-item-search-result/workspace-item-search-result-detail-element.component.ts
@@ -1,4 +1,7 @@
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
 import { Observable } from 'rxjs';
 import { find } from 'rxjs/operators';

@@ -29,7 +32,7 @@ import { SearchResultDetailElementComponent } from '../search-result-detail-elem
 })

@listableObjectComponent(WorkspaceItemSearchResult, ViewMode.DetailedListElement)
-export class WorkspaceItemSearchResultDetailElementComponent extends SearchResultDetailElementComponent<WorkspaceItemSearchResult, WorkspaceItem> {
+export class WorkspaceItemSearchResultDetailElementComponent extends SearchResultDetailElementComponent<WorkspaceItemSearchResult, WorkspaceItem> implements OnInit {

  /**
   * The item object that belonging to the result object
@@ -51,7 +54,7 @@ export class WorkspaceItemSearchResultDetailElementComponent extends SearchResul
  /**
   * Initialize all instance variables
   */
-  ngOnInit() {
+  ngOnInit(): void {
    super.ngOnInit();
    this.linkService.resolveLink(this.dso, followLink('item'));
    this.initItem(this.dso.item as Observable<RemoteData<Item>>);
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.ts
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.ts
@@ -3,7 +3,10 @@ import {
  NgFor,
  NgIf,
 } from '@angular/common';
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';

@@ -35,7 +38,7 @@ import { SearchResultGridElementComponent } from '../../search-result-grid-eleme
 /**
 * The component for displaying a grid element for an item search result of the type Publication
 */
-export class ItemSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> {
+export class ItemSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> implements OnInit {
  /**
   * Route to the item's page
   */
--- a/src/app/shared/object-list/identifier-data/identifier-data.component.ts
+++ b/src/app/shared/object-list/identifier-data/identifier-data.component.ts
@@ -5,6 +5,7 @@ import {
 import {
  Component,
  Input,
+  OnInit,
 } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
@@ -28,7 +29,7 @@ import { IdentifierData } from './identifier-data.model';
 /**
 * Component rendering an identifier, eg. DOI or handle
 */
-export class IdentifierDataComponent {
+export class IdentifierDataComponent implements OnInit {

  @Input() item: Item;
  identifiers$: Observable<IdentifierData>;
--- a/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-approved-search-result/claimed-approved-search-result-list-element.component.ts
+++ b/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-approved-search-result/claimed-approved-search-result-list-element.component.ts
@@ -5,6 +5,7 @@ import {
 import {
  Component,
  Inject,
+  OnInit,
 } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
@@ -40,7 +41,7 @@ import { ThemedItemListPreviewComponent } from '../../item-list-preview/themed-i
  imports: [NgIf, ThemedItemListPreviewComponent, AsyncPipe, TranslateModule, VarDirective],
 })
@listableObjectComponent(ClaimedApprovedTaskSearchResult, ViewMode.ListElement)
-export class ClaimedApprovedSearchResultListElementComponent extends SearchResultListElementComponent<ClaimedTaskSearchResult, ClaimedTask> {
+export class ClaimedApprovedSearchResultListElementComponent extends SearchResultListElementComponent<ClaimedTaskSearchResult, ClaimedTask> implements OnInit {

  /**
   * A boolean representing if to show submitter information
@@ -69,7 +70,7 @@ export class ClaimedApprovedSearchResultListElementComponent extends SearchResul
  /**
   * Initialize all instance variables
   */
-  ngOnInit() {
+  ngOnInit(): void {
    super.ngOnInit();
    this.linkService.resolveLinks(this.dso,
      followLink('workflowitem',
--- a/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-declined-search-result/claimed-declined-search-result-list-element.component.ts
+++ b/src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-declined-search-result/claimed-declined-search-result-list-element.component.ts
@@ -5,6 +5,7 @@ import {
 import {
  Component,
  Inject,
+  OnInit,
 } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
@@ -40,7 +41,7 @@ import { ThemedItemListPreviewComponent } from '../../item-list-preview/themed-i
  imports: [NgIf, ThemedItemListPreviewComponent, AsyncPipe, TranslateModule, VarDirective],
 })
@listableObjectComponent(ClaimedDeclinedTaskSearchResult, ViewMode.ListElement)
-export class ClaimedDeclinedSearchResultListElementComponent extends SearchResultListElementComponent<ClaimedTaskSearchResult, ClaimedTask> {
+export class ClaimedDeclinedSearchResultListElementComponent extends SearchResultListElementComponent<ClaimedTaskSearchResult, ClaimedTask> implements OnInit {

  /**
   * A boolean representing if to show submitter information
@@ -69,7 +70,7 @@ export class ClaimedDeclinedSearchResultListElementComponent extends SearchResul
  /**
   * Initialize all instance variables
   */
-  ngOnInit() {
+  ngOnInit(): void {
    super.ngOnInit();
    this.linkService.resolveLinks(this.dso,
      followLink('workflowitem',
--- a/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.ts
+++ b/src/app/shared/object-list/my-dspace-result-list-element/workflow-item-search-result/workflow-item-search-result-list-element.component.ts
@@ -6,6 +6,7 @@ import {
 import {
  Component,
  Inject,
+  OnInit,
 } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';

@@ -43,7 +44,7 @@ import { SearchResultListElementComponent } from '../../search-result-list-eleme
 })

@listableObjectComponent(WorkflowItemSearchResult, ViewMode.ListElement)
-export class WorkflowItemSearchResultListElementComponent extends SearchResultListElementComponent<WorkflowItemSearchResult, WorkflowItem> {
+export class WorkflowItemSearchResultListElementComponent extends SearchResultListElementComponent<WorkflowItemSearchResult, WorkflowItem> implements OnInit {
  LinkTypes = CollectionElementLinkType;

  ViewModes = ViewMode;
@@ -75,7 +76,7 @@ export class WorkflowItemSearchResultListElementComponent extends SearchResultLi
  /**
   * Initialize all instance variables
   */
-  ngOnInit() {
+  ngOnInit(): void {
    super.ngOnInit();
    this.deriveSearchResult();
    this.showThumbnails = this.appConfig.browseBy.showThumbnails;
--- a/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.ts
+++ b/src/app/shared/object-list/my-dspace-result-list-element/workspace-item-search-result/workspace-item-search-result-list-element.component.ts
@@ -6,6 +6,7 @@ import {
 import {
  Component,
  Inject,
+  OnInit,
 } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';

@@ -43,7 +44,7 @@ import { SearchResultListElementComponent } from '../../search-result-list-eleme
 })

@listableObjectComponent(WorkspaceItemSearchResult, ViewMode.ListElement)
-export class  WorkspaceItemSearchResultListElementComponent extends SearchResultListElementComponent<WorkspaceItemSearchResult, WorkspaceItem> {
+export class  WorkspaceItemSearchResultListElementComponent extends SearchResultListElementComponent<WorkspaceItemSearchResult, WorkspaceItem> implements OnInit {
  LinkTypes = CollectionElementLinkType;

  ViewModes = ViewMode;
@@ -75,7 +76,7 @@ export class  WorkspaceItemSearchResultListElementComponent extends SearchResult
  /**
   * Initialize all instance variables
   */
-  ngOnInit() {
+  ngOnInit(): void {
    super.ngOnInit();
    this.deriveSearchResult();
    this.showThumbnails = this.appConfig.browseBy.showThumbnails;
--- a/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts
+++ b/src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts
@@ -2,7 +2,10 @@ import {
  NgClass,
  NgIf,
 } from '@angular/common';
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
 import { RouterLink } from '@angular/router';

 import { Collection } from '../../../../core/shared/collection.model';
@@ -23,7 +26,7 @@ import { SearchResultListElementComponent } from '../search-result-list-element.
 * Component representing a collection search result in list view
 */
@listableObjectComponent(CollectionSearchResult, ViewMode.ListElement)
-export class CollectionSearchResultListElementComponent extends SearchResultListElementComponent<CollectionSearchResult, Collection> {
+export class CollectionSearchResultListElementComponent extends SearchResultListElementComponent<CollectionSearchResult, Collection> implements OnInit {

  /**
   * Display thumbnails if required by configuration
--- a/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts
+++ b/src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts
@@ -2,7 +2,10 @@ import {
  NgClass,
  NgIf,
 } from '@angular/common';
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
 import { RouterLink } from '@angular/router';

 import { Community } from '../../../../core/shared/community.model';
@@ -23,13 +26,12 @@ import { SearchResultListElementComponent } from '../search-result-list-element.
 * Component representing a community search result in list view
 */
@listableObjectComponent(CommunitySearchResult, ViewMode.ListElement)
-export class CommunitySearchResultListElementComponent extends SearchResultListElementComponent<CommunitySearchResult, Community> {
+export class CommunitySearchResultListElementComponent extends SearchResultListElementComponent<CommunitySearchResult, Community> implements OnInit {
  /**
   * Display thumbnails if required by configuration
   */
  showThumbnails: boolean;

-
  ngOnInit(): void {
    super.ngOnInit();
    this.showThumbnails = this.showThumbnails ?? this.appConfig.browseBy.showThumbnails;
--- a/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.ts
+++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.ts
@@ -4,7 +4,10 @@ import {
  NgFor,
  NgIf,
 } from '@angular/common';
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
 import { RouterLink } from '@angular/router';

 import { Item } from '../../../../../../core/shared/item.model';
@@ -30,7 +33,7 @@ import { SearchResultListElementComponent } from '../../../search-result-list-el
 /**
 * The component for displaying a list element for an item search result of the type Publication
 */
-export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> {
+export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> implements OnInit {
  /**
   * Route to the item's page
   */
--- a/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.ts
+++ b/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.ts
@@ -3,7 +3,10 @@ import {
  NgClass,
  NgIf,
 } from '@angular/common';
-import { Component } from '@angular/core';
+import {
+  Component,
+  OnInit,
+} from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import {
  Observable,
@@ -41,7 +44,7 @@ import { SearchResultListElementComponent } from '../search-result-list-element/
 * It displays the name of the parent, title and description of the object. All of which are customizable in the child
 * component by overriding the relevant methods of this component
 */
-export class SidebarSearchListElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends SearchResultListElementComponent<T, K> {
+export class SidebarSearchListElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends SearchResultListElementComponent<T, K> implements OnInit {
  /**
   * Observable for the title of the parent object (displayed above the object's title)
   */
--- a/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts
+++ b/src/app/shared/pagination-drag-and-drop/abstract-paginated-drag-and-drop-list.component.ts
@@ -7,6 +7,7 @@ import {
  ElementRef,
  EventEmitter,
  OnDestroy,
+  OnInit,
  Output,
  ViewChild,
 } from '@angular/core';
@@ -65,7 +66,7 @@ export const compareArraysUsingFieldUuids = () =>
  selector: 'ds-paginated-drag-drop-abstract',
  template: '',
 })
-export abstract class AbstractPaginatedDragAndDropListComponent<T extends DSpaceObject> implements OnDestroy {
+export abstract class AbstractPaginatedDragAndDropListComponent<T extends DSpaceObject> implements OnInit, OnDestroy {
  /**
   * A view on the child pagination component
   */
@@ -142,7 +143,7 @@ export abstract class AbstractPaginatedDragAndDropListComponent<T extends DSpace
  /**
   * Initialize the observables
   */
-  ngOnInit() {
+  ngOnInit(): void {
    this.initializeObjectsRD();
    this.initializeURL();
    this.initializeUpdates();
--- a/src/app/shared/search/search-filters/search-filter/search-filter.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-filter.component.html
@@ -6,7 +6,7 @@
          [attr.aria-label]="(((collapsed$ | async) ? 'search.filters.filter.expand' : 'search.filters.filter.collapse') | translate) + ' ' + (('search.filters.filter.' + filter.name + '.head') | translate | lowercase)"
          [attr.data-test]="'filter-toggle' | dsBrowserOnly"
  >
-    <span class="h4 d-inline-block text-left mt-auto mb-auto">
+    <span class="h4 d-inline-block text-left mt-auto mb-auto dark:text-white text-dark">
      {{'search.filters.filter.' + filter.name + '.head'| translate}}
    </span>
    <i class="filter-toggle flex-grow-1 fas p-auto"
--- a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html
+++ b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html
@@ -8,7 +8,7 @@
                    {{'search.filters.filter.' + filterConfig.name + '.min.label' | translate}}
                  </span>
                  <input type="text" [(ngModel)]="range[0]" [name]="filterConfig.paramName + '.min'"
-                         class="form-control" (blur)="onSubmit()"
+                         class="form-control"
                         [attr.aria-label]="minLabel"
                         [placeholder]="minLabel"
                  />
@@ -20,7 +20,7 @@
                      {{'search.filters.filter.' + filterConfig.name + '.max.label' | translate}}
                    </span>
                    <input type="text" [(ngModel)]="range[1]" [name]="filterConfig.paramName + '.max'"
-                           class="form-control" (blur)="onSubmit()"
+                           class="form-control"
                           [attr.aria-label]="maxLabel"
                           [placeholder]="maxLabel"
                    />
@@ -33,7 +33,8 @@

        <ng-container *ngIf="shouldShowSlider()">
            <nouislider [connect]="true" [config]="config" [min]="min" [max]="max" [step]="1"
-                        [dsDebounce]="250" (onDebounce)="onSubmit()"
+                        [dsDebounce]="250"
+                        (change)="onSliderChange($event)"
                        (keydown)="startKeyboardControl()" (keyup)="stopKeyboardControl()"
                        [(ngModel)]="range" ngDefaultControl>
            </nouislider>
@@ -43,5 +44,8 @@
          <ds-search-facet-range-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-range-option>
          </div>
        </ng-container>
+        <button (click)="onSubmit()" class="btn btn-primary">
+          {{'search.filters.search.submit' | translate}}
+        </button>
    </div>
 </div>
--- a/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.ts
+++ b/src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.ts
@@ -91,6 +91,11 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
   */
  range: [number | undefined, number | undefined];

+  /**
+   * The range currently selected by the slider
+   */
+  sliderRange: [number | undefined, number | undefined];
+
  /**
   * Whether the sider is being controlled by the keyboard.
   * Suppresses any changes until the key is released.
@@ -145,6 +150,15 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
    };
  }

+  /**
+   * Updates the sliderRange property with the current slider range.
+   * This method is called whenever the slider value changes, but it does not immediately apply the changes.
+   * @param range - The current range selected by the slider
+   */
+  onSliderChange(range: [number | undefined, number | undefined]): void {
+    this.sliderRange = range;
+  }
+
  /**
   * Submits new custom range values to the range filter from the widget
   */
@@ -182,5 +196,4 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
  shouldShowSlider(): boolean {
    return isPlatformBrowser(this.platformId);
  }
-
 }
--- a/src/app/shared/upload/uploader/uploader.component.ts
+++ b/src/app/shared/upload/uploader/uploader.component.ts
@@ -1,12 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { HttpXsrfTokenExtractor } from '@angular/common/http';
 import {
+  AfterViewInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  EventEmitter,
  HostListener,
  Input,
+  OnInit,
  Output,
  ViewEncapsulation,
 } from '@angular/core';
@@ -42,7 +44,7 @@ import { UploaderProperties } from './uploader-properties.model';
  standalone: true,
  imports: [TranslateModule, FileUploadModule, CommonModule],
 })
-export class UploaderComponent {
+export class UploaderComponent implements OnInit, AfterViewInit {

  /**
   * The message to show when drag files on the drop zone
@@ -122,7 +124,7 @@ export class UploaderComponent {
  /**
   * Method provided by Angular. Invoked after the constructor.
   */
-  ngOnInit() {
+  ngOnInit(): void {
    this.uploaderId = 'ds-drag-and-drop-uploader' + uniqueId();
    this.checkConfig(this.uploadFilesOptions);
    this.uploader = new FileUploader({
@@ -147,7 +149,7 @@ export class UploaderComponent {
    }
  }

-  ngAfterViewInit() {
+  ngAfterViewInit(): void {
    this.uploader.onAfterAddingAll = ((items) => {
      this.onFileSelected.emit(items);
    });
--- a/src/app/submission/form/collection/submission-form-collection.component.ts
+++ b/src/app/submission/form/collection/submission-form-collection.component.ts
@@ -5,6 +5,7 @@ import {
  EventEmitter,
  Input,
  OnChanges,
+  OnDestroy,
  OnInit,
  Output,
  SimpleChanges,
@@ -58,7 +59,7 @@ import { SubmissionService } from '../../submission.service';
    ThemedCollectionDropdownComponent,
  ],
 })
-export class SubmissionFormCollectionComponent implements OnChanges, OnInit {
+export class SubmissionFormCollectionComponent implements OnDestroy, OnChanges, OnInit {

  /**
   * The current collection id this submission belonging to
--- a/src/app/submission/form/submission-upload-files/submission-upload-files.component.ts
+++ b/src/app/submission/form/submission-upload-files/submission-upload-files.component.ts
@@ -3,6 +3,7 @@ import {
  Component,
  Input,
  OnChanges,
+  OnDestroy,
 } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import {
@@ -43,7 +44,7 @@ import parseSectionErrors from '../../utils/parseSectionErrors';
  ],
  standalone: true,
 })
-export class SubmissionUploadFilesComponent implements OnChanges {
+export class SubmissionUploadFilesComponent implements OnChanges, OnDestroy {

  /**
   * The collection id this submission belonging to
--- a/src/app/submission/sections/duplicates/section-duplicates.component.ts
+++ b/src/app/submission/sections/duplicates/section-duplicates.component.ts
@@ -7,6 +7,7 @@ import {
  ChangeDetectionStrategy,
  Component,
  Inject,
+  OnInit,
 } from '@angular/core';
 import {
  TranslateModule,
@@ -48,7 +49,7 @@ import { SectionsService } from '../sections.service';
  standalone: true,
 })

-export class SubmissionSectionDuplicatesComponent extends SectionModelComponent {
+export class SubmissionSectionDuplicatesComponent extends SectionModelComponent implements OnInit {
  protected readonly Metadata = Metadata;
  /**
   * The Alert categories.
--- a/src/app/submission/sections/identifiers/section-identifiers.component.ts
+++ b/src/app/submission/sections/identifiers/section-identifiers.component.ts
@@ -7,6 +7,7 @@ import {
  ChangeDetectionStrategy,
  Component,
  Inject,
+  OnInit,
 } from '@angular/core';
 import {
  TranslateModule,
@@ -47,7 +48,7 @@ import { SectionsService } from '../sections.service';
  standalone: true,
 })

-export class SubmissionSectionIdentifiersComponent extends SectionModelComponent {
+export class SubmissionSectionIdentifiersComponent extends SectionModelComponent implements OnInit {
  /**
   * The Alert categories.
   * @type {AlertType}
@@ -76,7 +77,6 @@ export class SubmissionSectionIdentifiersComponent extends SectionModelComponent
  /**
   * Initialize instance variables.
   *
-   * @param {PaginationService} paginationService
   * @param {TranslateService} translate
   * @param {SectionsService} sectionService
   * @param {SubmissionService} submissionService
@@ -93,7 +93,7 @@ export class SubmissionSectionIdentifiersComponent extends SectionModelComponent
    super(injectedCollectionId, injectedSectionData, injectedSubmissionId);
  }

-  ngOnInit() {
+  ngOnInit(): void {
    super.ngOnInit();
  }

--- a/src/app/workspaceitems-edit-page/workspaceitems-edit-page-routes.ts
+++ b/src/app/workspaceitems-edit-page/workspaceitems-edit-page-routes.ts
@@ -50,16 +50,6 @@ export const ROUTES: Route[] = [
        },
        data: { title: 'workspace-item.delete', breadcrumbKey: 'workspace-item.delete' },
      },
-      {
-        canActivate: [authenticatedGuard],
-        path: 'delete',
-        component: ThemedWorkspaceItemsDeletePageComponent,
-        resolve: {
-          dso: itemFromWorkspaceResolver,
-          breadcrumb: i18nBreadcrumbResolver,
-        },
-        data: { title: 'workspace-item.delete', breadcrumbKey: 'workspace-item.delete' },
-      },
    ],
  },
 ];
--- a/src/assets/i18n/de.json5
+++ b/src/assets/i18n/de.json5
@@ -3450,7 +3450,7 @@
  "journalissue.listelement.badge": "Zeitschriftenheft",

  // "journalissue.page.description": "Description",
-  "journalissue.page.description": "Beschreibeung",
+  "journalissue.page.description": "Beschreibung",

  // "journalissue.page.edit": "Edit this item",
  "journalissue.page.edit": "Dieses Item bearbeiten",
@@ -5881,7 +5881,7 @@
  "workflow-item.delete.notification.success.title": "Gelöscht",

  // "workflow-item.delete.notification.success.content": "This workflow item was successfully deleted",
-  "workflow-item.delete.notification.success.content": "Dieses Workflow-Item wurde gelöscht.",
+  "workflow-item.delete.notification.success.content": "Dieses Workflow-Item wurde erfolgreich gelöscht.",

  // "workflow-item.delete.notification.error.title": "Something went wrong",
  "workflow-item.delete.notification.error.title": "Das hat leider nicht funktioniert.",
@@ -5926,4 +5926,36 @@
  // "workflow-item.send-back.button.confirm": "Send back"
  "workflow-item.send-back.button.confirm": "Zurücksenden",

+  // "workflow-item.view.breadcrumbs": "Workflow View",
+  "workflow-item.view.breadcrumbs": "Workflow-Ansicht",
+
+  // "workspace-item.view.breadcrumbs": "Workspace View",
+  "workspace-item.view.breadcrumbs": "Workspace-Ansicht",
+
+  // "workspace-item.view.title": "Workspace View",
+  "workspace-item.view.title": "Workspace-Ansicht",
+
+  // "workspace-item.delete.breadcrumbs": "Workspace Delete",
+  "workspace-item.delete.breadcrumbs": "Workspace-Item löschen",
+
+  // "workspace-item.delete.header": "Delete workspace item",
+  "workspace-item.delete.header": "Workspace-Item löschen",
+
+  // "workspace-item.delete.button.confirm": "Delete",
+  "workspace-item.delete.button.confirm": "Löschen",
+
+  // "workspace-item.delete.button.cancel": "Cancel",
+  "workspace-item.delete.button.cancel": "Abbrechen",
+
+  // "workspace-item.delete.notification.success.title": "Deleted",
+  "workspace-item.delete.notification.success.title": "Gelöscht",
+
+  // "workspace-item.delete.title": "This workspace item was successfully deleted",
+  "workspace-item.delete.title": "Dieses Workspace-Item wurde erfolgreich gelöscht.",
+
+  // "workspace-item.delete.notification.error.title": "Something went wrong",
+  "workspace-item.delete.notification.error.title": "Das hat leider nicht funktioniert.",
+
+  // "workspace-item.delete.notification.error.content": "The workspace item could not be deleted",
+  "workspace-item.delete.notification.error.content": "Das Workspace-Item konnte nicht gelöscht werden.",
 }
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -1864,6 +1864,8 @@

  "error.validation.license.notgranted": "You must grant this license to complete your submission. If you are unable to grant this license at this time you may save your work and return later or remove the submission.",

+  "error.validation.cclicense.required": "You must grant this cclicense to complete your submission. If you are unable to grant the cclicense at this time, you may save your work and return later or remove the submission.",
+
  "error.validation.pattern": "This input is restricted by the current pattern: {{ pattern }}.",

  "error.validation.filerequired": "The file upload is mandatory",
--- a/src/modules/app/browser-init.service.ts
+++ b/src/modules/app/browser-init.service.ts
@@ -32,9 +32,11 @@ import { AppState } from '../../app/app.reducer';
 import { BreadcrumbsService } from '../../app/breadcrumbs/breadcrumbs.service';
 import { AuthService } from '../../app/core/auth/auth.service';
 import { coreSelector } from '../../app/core/core.selectors';
+import { RequestService } from '../../app/core/data/request.service';
 import { RootDataService } from '../../app/core/data/root-data.service';
 import { LocaleService } from '../../app/core/locale/locale.service';
 import { HeadTagService } from '../../app/core/metadata/head-tag.service';
+import { HALEndpointService } from '../../app/core/shared/hal-endpoint.service';
 import { CorrelationIdService } from '../../app/correlation-id/correlation-id.service';
 import { InitService } from '../../app/init.service';
 import { KlaroService } from '../../app/shared/cookies/klaro.service';
@@ -81,6 +83,9 @@ export class BrowserInitService extends InitService {
    protected menuService: MenuService,
    private rootDataService: RootDataService,
    protected router: Router,
+    private requestService: RequestService,
+    private halService: HALEndpointService,
+
  ) {
    super(
      store,
@@ -169,17 +174,15 @@ export class BrowserInitService extends InitService {
  }

  /**
-   * During an external authentication flow invalidate the SSR transferState
+   * During an external authentication flow invalidate the
   * data in the cache. This allows the app to fetch fresh content.
   * @private
   */
  private externalAuthCheck() {
-
    this.sub = this.authService.isExternalAuthentication().pipe(
      filter((externalAuth: boolean) => externalAuth),
    ).subscribe(() => {
-      // Clear the transferState data.
-      this.rootDataService.invalidateRootCache();
+      this.requestService.setStaleByHrefSubstring(this.halService.getRootHref());
      this.authService.setExternalAuthStatus(false);
    },
    );
--- a/webpack/webpack.browser.ts
+++ b/webpack/webpack.browser.ts
@@ -35,5 +35,12 @@ module.exports = Object.assign({}, commonExports, {
      buildAppConfig(join(process.cwd(), 'src/assets/config.json'));
      return middlewares;
    }
-  }
+  },
+  watchOptions: {
+    // Ignore directories that should not be watched for recompiling angular
+    ignored: [
+      '**/node_modules', '**/_build', '**/.git', '**/docker',
+      '**/.angular', '**/.idea', '**/.vscode', '**/.history', '**/.vsix'
+    ]
+  },
 });
--- a/webpack/webpack.common.ts
+++ b/webpack/webpack.common.ts
@@ -79,6 +79,7 @@ const SCSS_LOADERS = [

 export const commonExports = {
  plugins: [
+    // @ts-expect-error: EnvironmentPlugin constructor types are currently to strict see issue https://github.com/webpack/webpack/issues/18719
    new EnvironmentPlugin({
      languageHashes: getFileHashes(path.join(__dirname, '..', 'src', 'assets', 'i18n'), /.*\.json5/g),
    }),
--- a/webpack/webpack.prod.ts
+++ b/webpack/webpack.prod.ts
@@ -1,16 +1,17 @@
-import { commonExports } from './webpack.common';
-import { projectRoot } from './helpers';
+import { EnvironmentPlugin } from 'webpack';

-const webpack = require('webpack');
+import { projectRoot } from './helpers';
+import { commonExports } from './webpack.common';

 module.exports = Object.assign({}, commonExports, {
  plugins: [
    ...commonExports.plugins,
-    new webpack.EnvironmentPlugin({
+    // @ts-expect-error: EnvironmentPlugin constructor types are currently to strict see issue https://github.com/webpack/webpack/issues/18719
+    new EnvironmentPlugin({
      'process.env': {
-        NODE_ENV: JSON.stringify('production'),
-        AOT: true
-      }
+        NODE_ENV: 'production',
+        AOT: true,
+      },
    }),
  ],
  mode: 'production',
--- a/yarn.lock
+++ b/yarn.lock