Merge pull request #910 from nsemets/feature/initial-angular-upgrade

[ENG-10561] Upgrade Angular to Version 21

Author: nsemets

.prettierignore

@@ -34,6 +34,7 @@ yarn-error.log
 /libpeerconnection.log
 testem.log
 /typings
+/public
 
 # System files
 .DS_Store

angular.json

@@ -21,7 +21,6 @@
             "outputPath": "dist/osf",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "allowedCommonJsDependencies": [
@@ -196,9 +195,6 @@
           },
           "defaultConfiguration": "development"
         },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n"
-        },
         "test": {
           "builder": "@angular-devkit/build-angular:jest",
           "options": {

docs/docker.md

@@ -161,7 +161,6 @@ If the application does not open in your browser at [http://localhost:4200](http
    This should return something like `0.0.0.0:4200` or `127.0.0.1:4200`.
 
 6. **Bypass browser caching issues**
-
    - Open the site in an incognito/private window.
    - Or test with:
      ```bash

docs/git-convention.md

@@ -37,7 +37,6 @@ The local pipeline is managed via husky
 To contribute to this repository, follow these steps:
 
 1. **Fork the Repository**
-
    - Go to the main repository page on GitHub [OSF Angular Project](https://github.com/CenterForOpenScience/angular-osf).
    - Click the **Fork** button (top-right corner).
    - This creates a copy of the repository under your GitHub account.
@@ -56,7 +55,6 @@ To contribute to this repository, follow these steps:
    ```
 
 4. **Make Your Changes**
-
    - Follow the commit conventions outlined below.
    - Ensure all tests pass before committing.
 

eslint.config.js

@@ -1,33 +1,30 @@
 // @ts-check
 const eslint = require('@eslint/js');
+const { defineConfig } = require('eslint/config');
 const tseslint = require('typescript-eslint');
 const angular = require('angular-eslint');
-const pluginImport = require('eslint-plugin-import');
+
 const pluginSimpleImportSort = require('eslint-plugin-simple-import-sort');
 const pluginUnusedImports = require('eslint-plugin-unused-imports');
 const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended');
-const angularEslintTemplate = require('@angular-eslint/eslint-plugin-template');
-const angularTemplateParser = require('@angular-eslint/template-parser');
 
-module.exports = tseslint.config(
+module.exports = defineConfig(
   {
     files: ['**/*.ts'],
     extends: [
       eslint.configs.recommended,
-      ...tseslint.configs.recommended,
-      ...tseslint.configs.stylistic,
-      ...angular.configs.tsRecommended,
+      tseslint.configs.recommended,
+      tseslint.configs.stylistic,
+      angular.configs.tsRecommended,
       eslintPluginPrettierRecommended,
     ],
     processor: angular.processInlineTemplates,
     plugins: {
-      import: pluginImport,
       'simple-import-sort': pluginSimpleImportSort,
       'unused-imports': pluginUnusedImports,
     },
     rules: {
       '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
-
       '@angular-eslint/directive-selector': [
         'error',
         {
@@ -44,9 +41,7 @@ module.exports = tseslint.config(
           style: 'kebab-case',
         },
       ],
-      'import/first': 'error',
-      'import/no-duplicates': 'error',
-      'import/newline-after-import': 'error',
+      'no-duplicate-imports': 'error',
       'simple-import-sort/imports': [
         'error',
         {
@@ -58,7 +53,7 @@ module.exports = tseslint.config(
             ['^ngx-', '^@ngx', '^ng-'],
 
             // Third-party packages (primeng)
-            ['^@primeng', '^primeng'],
+            ['^@primeng', '^primeng', '^@primeuix', '^primeuix'],
 
             // RxJS packages (rxjs or @rxjs/...)
             ['^rxjs', '^rxjs/operators'],
@@ -86,26 +81,29 @@ module.exports = tseslint.config(
     },
   },
   {
-    files: ['**/*.html'],
-    languageOptions: {
-      parser: angularTemplateParser,
-    },
-    extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],
+    files: ['src/app/**/*.html'],
+    extends: [
+      angular.configs.templateRecommended,
+      angular.configs.templateAccessibility,
+      eslintPluginPrettierRecommended,
+    ],
     rules: {
-      '@angular-eslint/template/banana-in-box': ['error'],
-      '@angular-eslint/template/eqeqeq': ['error'],
-      '@angular-eslint/template/no-negated-async': ['error'],
-      '@angular-eslint/template/alt-text': ['error'],
-      '@angular-eslint/template/click-events-have-key-events': ['error'],
-      '@angular-eslint/template/elements-content': ['error'],
-      '@angular-eslint/template/interactive-supports-focus': ['error'],
-      '@angular-eslint/template/label-has-associated-control': ['error'],
-      '@angular-eslint/template/mouse-events-have-key-events': ['error'],
-      '@angular-eslint/template/no-autofocus': ['error'],
-      '@angular-eslint/template/no-distracting-elements': ['error'],
-      '@angular-eslint/template/role-has-required-aria': ['error'],
-      '@angular-eslint/template/table-scope': ['error'],
-      '@angular-eslint/template/valid-aria': ['error'],
+      '@angular-eslint/template/banana-in-box': 'error',
+      '@angular-eslint/template/eqeqeq': 'error',
+      '@angular-eslint/template/no-negated-async': 'error',
+      '@angular-eslint/template/prefer-control-flow': 'error',
+
+      '@angular-eslint/template/alt-text': 'error',
+      '@angular-eslint/template/click-events-have-key-events': 'error',
+      '@angular-eslint/template/elements-content': 'error',
+      '@angular-eslint/template/interactive-supports-focus': 'error',
+      '@angular-eslint/template/label-has-associated-control': 'error',
+      '@angular-eslint/template/mouse-events-have-key-events': 'error',
+      '@angular-eslint/template/no-autofocus': 'error',
+      '@angular-eslint/template/no-distracting-elements': 'error',
+      '@angular-eslint/template/role-has-required-aria': 'error',
+      '@angular-eslint/template/table-scope': 'error',
+      '@angular-eslint/template/valid-aria': 'error',
     },
   },
   {