[WIP] Migration to Angular 18

.eslintrc.json

@@ -10,7 +10,12 @@
           "error",
           {
             "enforceBuildableLibDependency": true,
-            "allow": [],
+            "allow": [
+              "^.+/jest.setup",
+              "^.+/translations/.*.json$",
+              "^.+/tools/e2e/.+$",
+              "^.+/package.json"
+            ],
             "depConstraints": [
               {
                 "sourceTag": "type:feature",
@@ -23,12 +28,10 @@
                 ],
                 "bannedExternalImports": ["*app-config"]
               },
-              // data-access libs should only depend on data-access libs
               {
                 "sourceTag": "type:data-access",
                 "onlyDependOnLibsWithTags": ["type:data-access"]
               },
-              // ui libs should only depend on ui libs and shared & i18n utils
               {
                 "sourceTag": "type:ui",
                 "onlyDependOnLibsWithTags": [
@@ -37,12 +40,10 @@
                   "scope:shared"
                 ]
               },
-              // util libs should only depend on util libs
               {
                 "sourceTag": "type:util",
                 "onlyDependOnLibsWithTags": ["type:util"]
               },
-              // apps should depend on all kind of libs
               {
                 "sourceTag": "type:app",
                 "onlyDependOnLibsWithTags": [
@@ -53,7 +54,6 @@
                   "type:api"
                 ]
               },
-              // api libs should only depend on api libs
               {
                 "sourceTag": "type:api",
                 "onlyDependOnLibsWithTags": ["type:api", "scope:shared"],
@@ -67,12 +67,28 @@
     {
       "files": ["*.ts", "*.tsx"],
       "extends": ["plugin:@nx/typescript"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/no-unused-expressions": [
+          "error",
+          {
+            "allowShortCircuit": true,
+            "allowTernary": true
+          }
+        ]
+      }
     },
     {
       "files": ["*.js", "*.jsx"],
       "extends": ["plugin:@nx/javascript"],
-      "rules": {}
+      "rules": {
+        "@typescript-eslint/no-unused-expressions": [
+          "error",
+          {
+            "allowShortCircuit": true,
+            "allowTernary": true
+          }
+        ]
+      }
     },
     {
       "files": ["*.spec.ts", "*.cy.ts"],

.prettierignore

@@ -7,3 +7,6 @@
 # OpenAPI generated specs
 **/spec.yaml
 /.nx
+
+/.nx/cache
+/.nx/workspace-data

apps/data-platform/project.json

@@ -3,6 +3,7 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/data-platform/src",
   "projectType": "application",
+  "tags": ["type:app"],
   "targets": {
     "build": {
       "executor": "@nx/webpack:webpack",
@@ -37,7 +38,7 @@
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/data-platform/**/*.ts"]
@@ -47,14 +48,7 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
-        "jestConfig": "apps/data-platform/jest.config.ts",
-        "passWithNoTests": true
-      },
-      "configurations": {
-        "ci": {
-          "ci": true,
-          "codeCoverage": true
-        }
+        "jestConfig": "apps/data-platform/jest.config.ts"
       }
     },
     "docker-build": {
@@ -66,6 +60,5 @@
         ]
       }
     }
-  },
-  "tags": ["type:app"]
+  }
 }

apps/datafeeder/project.json

@@ -4,6 +4,7 @@
   "projectType": "application",
   "sourceRoot": "apps/datafeeder/src",
   "prefix": "gn-ui",
+  "tags": ["type:app", "published"],
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:browser",
@@ -72,23 +73,23 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "browserTarget": "datafeeder:build:production"
+          "buildTarget": "datafeeder:build:production"
         },
         "development": {
-          "browserTarget": "datafeeder:build:development",
-          "proxyConfig": "proxy-config.js"
+          "proxyConfig": "proxy-config.js",
+          "buildTarget": "datafeeder:build:development"
         }
       },
       "defaultConfiguration": "development"
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "browserTarget": "datafeeder:build"
+        "buildTarget": "datafeeder:build"
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "options": {
         "lintFilePatterns": [
           "apps/datafeeder/src/**/*.ts",
@@ -101,8 +102,7 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/apps/datafeeder"],
       "options": {
-        "jestConfig": "apps/datafeeder/jest.config.ts",
-        "passWithNoTests": true
+        "jestConfig": "apps/datafeeder/jest.config.ts"
       }
     },
     "docker-build": {
@@ -115,6 +115,5 @@
         "parallel": false
       }
     }
-  },
-  "tags": ["type:app", "published"]
+  }
 }

apps/datafeeder/src/app/app.module.ts

@@ -86,7 +86,9 @@ export function apiConfigurationFactory() {
     StoreModule.forRoot({
       [DATAFEEDER_STATE_KEY]: reducer,
     }),
-    !environment.production ? StoreDevtoolsModule.instrument() : [],
+    !environment.production
+      ? StoreDevtoolsModule.instrument({ connectInZone: true })
+      : [],
     ProgressBarComponent,
   ],
   providers: [importProvidersFrom(FeatureAuthModule)],

apps/datafeeder/src/test-setup.ts

@@ -1,15 +1,4 @@
-import 'jest-preset-angular/setup-jest'
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone'
 import '../../../jest.setup'
 
-import { getTestBed } from '@angular/core/testing'
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing'
-
-getTestBed().resetTestEnvironment()
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting(),
-  { teardown: { destroyAfterEach: false } }
-)
+setupZoneTestEnv({ teardown: { destroyAfterEach: false } })

apps/datahub-e2e/project.json

@@ -3,6 +3,8 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/datahub-e2e/src",
   "projectType": "application",
+  "tags": [],
+  "implicitDependencies": ["datahub", "database-dump"],
   "targets": {
     "e2e": {
       "executor": "@nx/cypress:cypress",
@@ -25,13 +27,11 @@
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["apps/datahub-e2e/**/*.{js,ts}"]
       }
     }
-  },
-  "tags": [],
-  "implicitDependencies": ["datahub", "database-dump"]
+  }
 }

apps/datahub-e2e/src/e2e/datasets.cy.ts

@@ -156,7 +156,7 @@ describe('datasets', () => {
       const hasDuplicates = options.some(
         (text, index) => options.indexOf(text) !== index
       )
-      expect(hasDuplicates).to.be.false
+      expect(hasDuplicates).to.eql(false)
     }
 
     beforeEach(() => {

apps/datahub/project.json

@@ -4,6 +4,7 @@
   "projectType": "application",
   "sourceRoot": "apps/datahub/src",
   "prefix": "datahub",
+  "tags": ["type:app", "published"],
   "targets": {
     "build": {
       "executor": "@angular-devkit/build-angular:browser",
@@ -88,23 +89,23 @@
       "executor": "@angular-devkit/build-angular:dev-server",
       "configurations": {
         "production": {
-          "browserTarget": "datahub:build:production"
+          "buildTarget": "datahub:build:production"
         },
         "development": {
-          "browserTarget": "datahub:build:development",
-          "proxyConfig": "proxy-config.js"
+          "proxyConfig": "proxy-config.js",
+          "buildTarget": "datahub:build:development"
         }
       },
       "defaultConfiguration": "development"
     },
     "extract-i18n": {
       "executor": "@angular-devkit/build-angular:extract-i18n",
       "options": {
-        "browserTarget": "datahub:build"
+        "buildTarget": "datahub:build"
       }
     },
     "lint": {
-      "executor": "@nx/linter:eslint",
+      "executor": "@nx/eslint:lint",
       "options": {
         "lintFilePatterns": [
           "apps/datahub/src/**/*.ts",
@@ -117,8 +118,7 @@
       "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/apps/datahub"],
       "options": {
-        "jestConfig": "apps/datahub/jest.config.ts",
-        "passWithNoTests": true
+        "jestConfig": "apps/datahub/jest.config.ts"
       }
     },
     "docker-build": {
@@ -131,6 +131,5 @@
         "parallel": false
       }
     }
-  },
-  "tags": ["type:app", "published"]
+  }
 }

apps/datahub/src/app/app.module.ts

@@ -138,7 +138,9 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
         },
       }
     ),
-    !environment.production ? StoreDevtoolsModule.instrument() : [],
+    !environment.production
+      ? StoreDevtoolsModule.instrument({ connectInZone: true })
+      : [],
     EffectsModule.forRoot(),
     UtilI18nModule,
     TranslateModule.forRoot(TRANSLATE_WITH_OVERRIDES_CONFIG),

apps/datahub/src/app/organization/organization-header/organization-header.component.ts

@@ -6,7 +6,7 @@ import {
   UiInputsModule,
 } from '@geonetwork-ui/ui/inputs'
 import { Organization } from '@geonetwork-ui/common/domain/model/record'
-import { AsyncPipe, Location, NgIf } from '@angular/common'
+import { Location, NgIf } from '@angular/common'
 import { ErrorType, UiElementsModule } from '@geonetwork-ui/ui/elements'
 import { Router } from '@angular/router'
 import {
@@ -31,7 +31,6 @@ import { matArrowBack } from '@ng-icons/material-icons/baseline'
     UiInputsModule,
     TranslateModule,
     NgIf,
-    AsyncPipe,
     UiElementsModule,
     NgIconComponent,
     LanguageSwitcherComponent,

apps/datahub/src/app/record/record-downloads/record-downloads.component.spec.ts

@@ -13,11 +13,12 @@ import { MdViewFacade } from '@geonetwork-ui/feature/record'
 import { MockBuilder } from 'ng-mocks'
 import { PopupAlertComponent } from '@geonetwork-ui/ui/widgets'
 
-// This is used to work around a very weird bug when comparing URL objects would fail
-// if the `searchParams` of the object wasn't accessed beforehand in some cases...
+// This is used to work around this issue with URL in JSDom:
+// https://github.com/jestjs/jest/issues/14012
 const newUrl = (url: string) => {
   const obj = new URL(url)
-  obj.searchParams // try commenting this out to see the bug
+  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+  obj.searchParams // calling the getter once to fill query params
   return obj
 }
 

apps/datahub/src/test-setup.ts

@@ -1,6 +1,8 @@
-import 'jest-preset-angular/setup-jest'
+import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone'
 import '../../../jest.setup'
 
+setupZoneTestEnv()
+
 class ResizeObserverMock {
   observe = jest.fn()
   unobserve = jest.fn()