Merge pull request #4870 from alexandrevryghem/angular-20-upgrade_backport-9_x

[Port dspace-9_x] Angular 20 upgrade

Author: tdonohue

.eslintrc.json

@@ -12,6 +12,7 @@
     "eslint-plugin-rxjs",
     "eslint-plugin-simple-import-sort",
     "eslint-plugin-import-newlines",
+    "@stylistic",
     "dspace-angular-ts",
     "dspace-angular-html"
   ],
@@ -175,15 +176,16 @@
             "ignoreParameters": true
           }
         ],
-        "@typescript-eslint/quotes": [
+        "@angular-eslint/prefer-inject": "off",
+        "@stylistic/quotes": [
           "error",
           "single",
           {
             "avoidEscape": true,
             "allowTemplateLiterals": true
           }
         ],
-        "@typescript-eslint/semi": "error",
+        "@stylistic/semi": "error",
         "@typescript-eslint/no-shadow": "error",
         "@typescript-eslint/dot-notation": "error",
         "@typescript-eslint/consistent-type-definitions": "error",
@@ -206,9 +208,9 @@
             ]
           }
         ],
-        "@typescript-eslint/type-annotation-spacing": "error",
+        "@stylistic/type-annotation-spacing": "error",
         "@typescript-eslint/unified-signatures": "error",
-        "@typescript-eslint/ban-types": "error",
+        "@typescript-eslint/no-restricted-types": "error",
         "@typescript-eslint/no-floating-promises": "warn",
         "@typescript-eslint/no-misused-promises": "warn",
         "@typescript-eslint/restrict-plus-operands": "warn",
@@ -279,7 +281,7 @@
             ]
           }
         ],
-        "dspace-angular-ts/themed-component-classes": "error",
+        "dspace-angular-ts/no-default-standalone-value": "error",
         "dspace-angular-ts/themed-component-selectors": "error",
         "dspace-angular-ts/themed-component-usages": "error",
         "dspace-angular-ts/themed-decorators": [

.github/workflows/build.yml

@@ -21,7 +21,7 @@ jobs:
       DSPACE_REST_PORT: 8080
       DSPACE_REST_NAMESPACE: '/server'
       DSPACE_REST_SSL: false
-      # Spin up UI on 127.0.0.1 to avoid host resolution issues in e2e tests with Node 18+
+      # Spin up UI on 127.0.0.1 to avoid host resolution issues in e2e tests with Node 20+
       DSPACE_UI_HOST: 127.0.0.1
       DSPACE_UI_PORT: 4000
       # Ensure all SSR caching is disabled in test environment
@@ -44,7 +44,7 @@ jobs:
     strategy:
       # Create a matrix of Node versions to test against (in parallel)
       matrix:
-        node-version: [18.x, 20.x]
+        node-version: [20.x, 22.x]
       # Do NOT exit immediately if one matrix job fails
       fail-fast: false
     # These are the actual CI steps to perform per job
@@ -114,7 +114,7 @@ jobs:
       # NOTE: Angular CLI only supports code coverage for specs. See https://github.com/angular/angular-cli/issues/6286
       - name: Upload code coverage report to Artifact
         uses: actions/upload-artifact@v4
-        if: matrix.node-version == '18.x'
+        if: matrix.node-version == '20.x'
         with:
           name: coverage-report-${{ matrix.node-version }}
           path: 'coverage/dspace-angular/lcov.info'

Dockerfile

@@ -1,7 +1,7 @@
 # This image will be published as dspace/dspace-angular
 # See https://github.com/DSpace/dspace-angular/tree/main/docker for usage details
 
-FROM docker.io/node:18-alpine
+FROM docker.io/node:20-alpine
 
 # Ensure Python and other build tools are available
 # These are needed to install some node modules, especially on linux/arm64

Dockerfile.dist

@@ -4,7 +4,7 @@
 # Test build:
 # docker build -f Dockerfile.dist -t dspace/dspace-angular:latest-dist .
 
-FROM docker.io/node:18-alpine AS build
+FROM docker.io/node:20-alpine AS build
 
 # Ensure Python and other build tools are available
 # These are needed to install some node modules, especially on linux/arm64
@@ -17,7 +17,7 @@ RUN npm install
 ADD . /app/
 RUN npm run build:prod
 
-FROM node:18-alpine
+FROM node:20-alpine
 RUN npm install --global pm2
 
 COPY --chown=node:node --from=build /app/dist /app/dist

README.md

@@ -35,7 +35,7 @@ https://wiki.lyrasis.org/display/DSDOC9x/Installing+DSpace
 Quick start
 -----------
 
-**Ensure you're running [Node](https://nodejs.org) `v18.x` or `v20.x`, [npm](https://www.npmjs.com/) >= `v10.x`**
+**Ensure you're running [Node](https://nodejs.org) `v20.x` or `v22.x`, [npm](https://www.npmjs.com/) >= `v10.x`**
 
 ```bash
 # clone the repo
@@ -90,7 +90,7 @@ Requirements
 ------------
 
 -	[Node.js](https://nodejs.org)
--	Ensure you're running node `v18.x` or `v20.x`
+-	Ensure you're running node `v20.x` or `v22.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.
 

angular.json

@@ -290,6 +290,30 @@
     },
     "@angular-eslint/schematics:library": {
       "setParserOptionsProject": true
+    },
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
     }
   }
 }

config/config.example.yml

@@ -235,8 +235,8 @@ submission:
           style: text-muted
           icon: fa-circle-xmark
 
-#  Default Language in which the UI will be rendered if the user's browser language is not an active language
-defaultLanguage: en
+#  Fallback language in which the UI will be rendered if the user's browser language is not an active language
+fallbackLanguage: en
 
 # Languages. DSpace Angular holds a message catalog for each of the following languages.
 # When set to active, users will be able to switch to the use of this language in the user interface.

cypress/plugins/index.ts

@@ -1,4 +1,4 @@
-const fs = require('node:fs');
+import fs from 'node:fs';
 
 // These two global variables are used to store information about the REST API used
 // by these e2e tests. They are filled out prior to running any tests in the before()

docs/lint/html/rules/themed-component-usages.md

@@ -30,11 +30,7 @@ _______
 ##### use no-prefix selectors in TypeScript templates
         
 ```html
-@Component({
-  template: '<ds-test-themeable></ds-test-themeable>'
-})
-class Test {
-}
+<ds-test-themeable></ds-test-themeable>
 ```
         
 
@@ -43,11 +39,7 @@ class Test {
 Filename: `lint/test/fixture/src/test.spec.ts`
 
 ```html
-@Component({
-  template: '<ds-test-themeable></ds-test-themeable>'
-})
-class Test {
-}
+<ds-test-themeable></ds-test-themeable>
 ```
         
 
@@ -56,11 +48,7 @@ class Test {
 Filename: `lint/test/fixture/src/test.spec.ts`
 
 ```html
-@Component({
-  template: '<ds-base-test-themeable></ds-base-test-themeable>'
-})
-class Test {
-}
+<ds-base-test-themeable></ds-base-test-themeable>
 ```
         
 

docs/lint/ts/index.md

@@ -2,8 +2,8 @@
 _______
 
 - [`dspace-angular-ts/alias-imports`](./rules/alias-imports.md): Unclear imports should be aliased for clarity
+- [`dspace-angular-ts/no-default-standalone-value`](./rules/no-default-standalone-value.md): Removes unnecessary explicit standalone declarations of the @Component decorators. Starting from Angular 19 this is now the default value.
 - [`dspace-angular-ts/sort-standalone-imports`](./rules/sort-standalone-imports.md): Sorts the standalone `@Component` imports alphabetically
-- [`dspace-angular-ts/themed-component-classes`](./rules/themed-component-classes.md): Formatting rules for themeable component classes
 - [`dspace-angular-ts/themed-component-selectors`](./rules/themed-component-selectors.md): Themeable component selectors should follow the DSpace convention
 - [`dspace-angular-ts/themed-component-usages`](./rules/themed-component-usages.md): Themeable components should be used via their `ThemedComponent` wrapper class
 - [`dspace-angular-ts/themed-decorators`](./rules/themed-decorators.md): Entry components with theme support should declare the correct theme