Skip to content

Update Node.js, Angular packages, and streamline ESLint configurations - #36838

Open
nicobytes wants to merge 27 commits into
mainfrom
35930-migrate-angular-21-angular-22-typescript-6-across-the-core-web-nx-workspace-2
Open

Update Node.js, Angular packages, and streamline ESLint configurations#36838
nicobytes wants to merge 27 commits into
mainfrom
35930-migrate-angular-21-angular-22-typescript-6-across-the-core-web-nx-workspace-2

Conversation

@nicobytes

@nicobytes nicobytes commented Jul 31, 2026

Copy link
Copy Markdown
Member

This pull request updates the required Node.js version across the project and refactors Angular ESLint config files for simplicity. It also disables Angular template strictness for certain apps (temporary migration unblock), adjusts some unit tests, and improves test reliability for relationship properties.

Node.js Version Update

  • Updated the required Node.js version from v22.15.0 to v22.22.3 in .nvmrc, core-web/.nvmrc, documentation, and onboarding files to ensure consistency and resolve build issues.

ESLint Configuration Refactoring

  • Simplified Angular app/lib ESLint configs by removing FlatCompat and applying nx.configs['flat/angular'] + flat/angular-template directly.
  • Explicitly set processor: angular.processInlineTemplates on **/*.ts blocks so inline template: strings stay linted (extract-inline-html; also provided by Nx flat/angular).
  • Disabled the @angular-eslint/prefer-on-push-component-change-detection rule where needed to maintain parity with the previous setup.
  • Accessibility template rules from Nx's preset remain off for behavior-neutral migration (adopt a11y separately).

Angular Compiler Options

  • Temporarily disabled Angular template strictness (strictTemplates: false) in tsconfig.app.json for dotcms-ui, dotcdn, dotcms-block-editor, and dotcms-binary-field-builder to unblock the Angular 22 / TypeScript 6 migration.
  • Tracked with TODO(#35930) on each app — re-enable per-app once template type errors are fixed. Libraries keep strictTemplates: true.

Test Improvements and Fixes

  • Updated unit tests to use .toBeFalsy() instead of .toBeNull() for better assertion robustness in dot-template-thumbnail-field.component.spec.ts.
  • Cleaned up unused imports and providers in content-type-fields-properties-form.component.spec.ts.
  • Improved dot-relationships-property.component.spec.ts by mocking HTTP requests (including the inverse-relationship editing branch).
  • Narrowed suggestions-list-item DomSanitizer bypass to data:image/ URLs only.

This PR fixes: #35930

nicobytes and others added 18 commits July 17, 2026 12:18
… ESLint configurations

- Updated Node.js version from 22.15.0 to 22.22.3 in multiple configuration files, including `.github/copilot-instructions.md` and `pom.xml`.
- Consolidated ESLint configuration rules across various applications and libraries for consistency and clarity, ensuring all relevant files adhere to the same standards.
- Removed unnecessary imports and streamlined coverage collection settings in Jest configuration files.

This update enhances compatibility and maintains code quality across the project.
…onfig, and improve frontend onboarding documentation
…urations

- Cleaned up ESLint configuration files across multiple applications and libraries by removing unnecessary imports related to FlatCompat.
- This change streamlines the ESLint setup and enhances consistency across the project.
…ate tests

- Refactored the `ContentTypesLayoutComponent` to use signals for managing the add-to-menu state, replacing the previous boolean flag.
- Updated the HTML template to reflect the new signal-based logic for displaying the add-to-menu component.
- Adjusted unit tests in `content-types-layout.component.spec.ts` to accommodate the changes in state management and component interactions.
- Modified the `DotAddToMenuComponent` to emit events correctly, ensuring proper functionality in the updated context.
- Enhanced the `dot-content-types.component.html` to align with the new event handling for the add-to-menu feature.
…functionality

- Added tests to verify that timeline items are correctly keyed by inode and bundleId.
- Implemented checks to ensure the timeline key updates appropriately when version lists are swapped.
- Introduced mock data for DotCMSContentletVersion and DotPushPublishHistoryItem to facilitate testing.
- Enhanced the DotHistoryTimelineListComponent to utilize a stable identity function for timeline items, improving key generation logic.
…nit tests

- Adjusted the HTML structure in `content-types-layout.component.html` for better readability and consistency.
- Updated the unit tests in `content-types-layout.component.spec.ts` to streamline component overrides and enhance clarity.
- Made minor formatting changes in `dot-history-timeline-list.component.spec.ts` to improve code organization and maintainability.
Restores nx format:check compliance so Initial Artifact Build passes in CI.

Co-authored-by: Cursor <cursoragent@cursor.com>
Copilot AI review requested due to automatic review settings July 31, 2026 13:34
@nicobytes
nicobytes requested a review from a team as a code owner July 31, 2026 13:34
@alwaysmeticulous

Copy link
Copy Markdown

Meticulous was unable to execute a test run for this PR because the most recent commit is associated with multiple PRs. To execute a test run, please try pushing up a new commit that is only associated with this PR.

Last updated for commit 721eaa7. This comment will update as new commits are pushed.

@claude

claude Bot commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

Claude finished @nicobytes's task in 6m 0s —— View job


Claude Code Review

Reviewed the non-generated source changes in this PR (block-editor sanitization, ESLint refactors, timeline rerender, comment-and-assign CD fix, severity icons, relationship spec, tsconfig changes). Scope is a large Angular 22 / TS 6 migration; findings below are limited to what's provable from the diff.

New Issues

  • 🟡 Medium: core-web/apps/dotcms-ui/eslint.config.mjs:7 (and the other 18 refactored configs) — Your review reply states the refactor keeps inline-template linting because you "also set processor: angular.processInlineTemplates on the local **/*.ts block in the 19 refactored configs." That processor is not present in any committed config — no processor: key and no @angular-eslint/eslint-plugin / angular import exists in any eslint.config.mjs. So the only thing keeping inline template: linting alive is whatever nx.configs['flat/angular'] ships implicitly. If that preset does not register the processor on **/*.ts, Copilot's original concern stands: template rules silently stop running on inline templates (e.g. apps/dotcms-ui/src/stories/primeng/misc/Ripple.component.ts). Assumption: nx.configs['flat/angular'] registers processInlineTemplates. What to verify: run pnpm nx lint dotcms-ui and confirm a deliberately-broken inline template (e.g. <div *ngIf or a bad interpolation) is still reported; if it is, update the review reply since the explicit-processor claim is inaccurate. Fix this →

  • 🟡 Medium: core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.ts:52safeUrl calls this.url.startsWith('data:image/') unconditionally. url is bound from [url]="item.icon" (suggestions.component.html:13) and DotMenuItem.icon is declared optional (icon?: string), so url can be undefined, which throws Cannot read properties of undefined (reading 'startsWith') and breaks rendering of that row. The previous code bound [src]="url" directly and tolerated undefined. Assumption: all current call sites set icon to a string, so this is latent rather than live. What to verify: guard with typeof this.url === 'string' && this.url.startsWith('data:image/') (matches the existing typeof guard in ngOnInit). Fix this →

Notes (non-blocking)

  • core-web/apps/dotcms-ui/tsconfig.app.json:14 — the previous "exclude": ["**/*.stories.ts", "**/*.stories.js"] was dropped in this change. Because files is explicitly set (main.ts, polyfills.ts), the app compilation graph is driven by imports rather than include/exclude, so this is most likely inert — but it's an undocumented removal unrelated to the strictTemplates change described in the PR body. Worth a one-line confirmation it was intentional.
  • core-web/tsconfig.base.json:17 — explicitly adding "strict": false at the base is behavior-neutral (TS already defaults strict to false when unset), so no regression; just flagging that it now makes the workspace-wide non-strict posture explicit for every project, libs included.
  • strictTemplates: false in dotcms-ui / dotcdn / dotcms-block-editor / dotcms-binary-field-builder is a real type-safety reduction, but it's intentional, TODO(#35930)-tracked, and acknowledged in the thread — not blocking.

Resolved

  • suggestions-list-item.component.ts:52 — bypass narrowed from all data: URLs to data:image/ only, addressing the Copilot XSS concern for the trusted-icon path.
  • dot-relationships-property.component.spec.ts:275 — the inverse-relationship test is no longer skipped; it runs with HTTP flush + mocked DotContentTypeService and asserts editing, STATUS_NEW, and the inverse var. No it.skip remains in the file.

Everything else (timeline @for-keyed rerender + spread-copy signal, cancel output rename with matching template/spec updates, PrimeIcons severity icons, cdr.detectChanges() in the comment-and-assign form after async role load, .toBeFalsy() assertions) looks correct and internally consistent.

35930-migrate-angular-21-angular-22-typescript-6-across-the-core-web-nx-workspace-2

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Not ready to approve

It introduces a security-sensitive sanitization bypass for all data: URLs, skips an existing unit test, and likely drops inline-template ESLint coverage after removing process-inline-templates.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

This review doesn't count toward merge requirements. Sign up for the private preview to control whether Copilot approvals count.

Pull request overview

This PR upgrades the core-web Nx workspace to Angular 22 + TypeScript 6, aligns the required Node.js version across the repo/tooling, and refactors many Angular project ESLint flat-config files to reduce boilerplate. It also includes a few targeted UI/test changes to keep unit tests stable and address rendering and sanitization behavior changes surfaced by the upgrade.

Changes:

  • Bump required Node.js version to v22.22.3 across .nvmrc, Maven nodejs-parent, and docs/onboarding.
  • Upgrade Angular/Nx/TypeScript dependencies (Angular 22.x, Nx 23.1.0, TS 6.0.3) and add transitional TypeScript config (ignoreDeprecations: "6.0").
  • Simplify Angular ESLint configs and adjust several unit tests/components (timeline rerendering, PrimeIcons usage, relationship property spec reliability).
File summaries
File Description
ONBOARDING.md Updates Node version guidance to 22.22.3+.
nodejs-parent/pom.xml Updates the Maven-managed Node version to v22.22.3.
dotFrontendOnboarding.md Updates documented Angular/Nx/Node versions to match the migration.
docs/frontend/ANGULAR_STANDARDS.md Updates documented tech stack versions (Angular 22, TS 6, Nx 23, Node 22.22.3).
core-web/tsconfig.base.json Adds ignoreDeprecations: "6.0" and explicitly sets strict: false.
core-web/package.json Upgrades Angular/Nx/TS and related tooling; adds pnpm peerDependencyRules allowances.
core-web/libs/utils/eslint.config.mjs Refactors flat ESLint config to remove FlatCompat boilerplate.
core-web/libs/utils-testing/eslint.config.mjs Refactors flat ESLint config and disables prefer-on-push rule for parity.
core-web/libs/ui/src/lib/directives/dot-trim-input/dot-trim-input.directive.spec.ts Cleans up unused test provider/import usage.
core-web/libs/ui/src/lib/components/dot-severity-icon/dot-severity-icon.component.spec.ts Updates tests to validate PrimeIcons-based rendering.
core-web/libs/ui/src/lib/components/dot-severity-icon/dot-severity-icon.component.html Switches severity icon rendering to PrimeIcons <i class="pi ...">.
core-web/libs/ui/eslint.config.mjs Refactors flat ESLint config and disables prefer-on-push rule for parity.
core-web/libs/template-builder/tsconfig.lib.json Simplifies exclude list formatting.
core-web/libs/template-builder/eslint.config.mjs Refactors flat ESLint config and disables prefer-on-push rule for parity.
core-web/libs/portlets/edit-ema/ui/eslint.config.mjs Refactors flat ESLint config and disables prefer-on-push rule for parity.
core-web/libs/portlets/edit-ema/portlet/eslint.config.mjs Refactors flat ESLint config and disables prefer-on-push rule for parity.
core-web/libs/portlets/dot-experiments/portlet/eslint.config.mjs Refactors flat ESLint config (incl. module-boundaries override).
core-web/libs/portlets/dot-experiments/data-access/eslint.config.mjs Refactors flat ESLint config.
core-web/libs/new-block-editor/eslint.config.mjs Refactors flat ESLint config and disables prefer-on-push rule for parity.
core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-history/components/dot-history-timeline-list/dot-history-timeline-list.component.ts Adds stable key/value computed signals to force Timeline rerendering on item changes.
core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-history/components/dot-history-timeline-list/dot-history-timeline-list.component.spec.ts Adds tests around timeline keying and rerender behavior for version/push-publish items.
core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-history/components/dot-history-timeline-list/dot-history-timeline-list.component.html Wraps <p-timeline> in an @for keyed loop to force recreation when items change.
core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.spec.ts Adjusts test setup to derive single-tab styling from store initialization.
core-web/libs/edit-content/eslint.config.mjs Refactors flat ESLint config and disables prefer-on-push rule for parity.
core-web/libs/edit-content-bridge/tsconfig.lib.json Simplifies exclude list formatting.
core-web/libs/dotcms-js/eslint.config.mjs Refactors flat ESLint config.
core-web/libs/dot-rules/eslint.config.mjs Refactors flat ESLint config and disables prefer-on-push rule for parity.
core-web/libs/dot-layout-grid/eslint.config.mjs Refactors flat ESLint config.
core-web/libs/data-access/eslint.config.mjs Refactors flat ESLint config.
core-web/libs/block-editor/tsconfig.lib.json Simplifies exclude list formatting.
core-web/libs/block-editor/src/lib/shared/utils/suggestion.utils.ts Removes sanitizer usage for icons and returns string icon URLs directly.
core-web/libs/block-editor/src/lib/shared/components/suggestions/suggestions.component.ts Narrows DotMenuItem.icon typing to string (removes SafeUrl).
core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.ts Adds safeUrl getter and sanitizes trusted data image URLs.
core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.spec.ts Adds tests for data URL rendering and material icon rendering.
core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.html Binds <img [src]> to safeUrl rather than raw url.
core-web/libs/block-editor/eslint.config.mjs Refactors flat ESLint config and disables prefer-on-push rule for parity.
core-web/jest.preset.js Simplifies collectCoverageFrom configuration.
core-web/apps/dotcms-ui/tsconfig.app.json Disables Angular strictTemplates in the main app.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-listing/dot-content-types.component.html Updates event binding to match renamed output (cancel).
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-listing/components/dot-add-to-menu/dot-add-to-menu.component.ts Renames output from $cancel to cancel and updates emitter usage.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-listing/components/dot-add-to-menu/dot-add-to-menu.component.spec.ts Updates spies/assertions to use renamed output (cancel).
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.ts Converts add-to-menu visibility state to a signal.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.spec.ts Updates the layout spec to work with the new dialog state and added service dependencies.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/layout/content-types-layout.component.html Moves add-to-menu dialog into the layout template guarded by a signal.
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-properties-form/field-properties/dot-relationships-property/dot-relationships-property.component.spec.ts Adds HTTP mocking and skips a legacy async inverse-relationship test (with TODO).
core-web/apps/dotcms-ui/src/app/portlets/shared/dot-content-types-edit/components/fields/content-type-fields-properties-form/content-type-fields-properties-form.component.spec.ts Cleans up unused imports/providers in the spec.
core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-props/dot-template-thumbnail-field/dot-template-thumbnail-field.component.spec.ts Changes assertions from toBeNull() to toBeFalsy() for robustness.
core-web/apps/dotcms-ui/eslint.config.mjs Refactors flat ESLint config and disables prefer-on-push rule for parity.
core-web/apps/dotcms-block-editor/tsconfig.app.json Disables Angular strictTemplates for the block editor app.
core-web/apps/dotcms-block-editor/eslint.config.mjs Refactors flat ESLint config.
core-web/apps/dotcms-binary-field-builder/tsconfig.app.json Disables Angular strictTemplates for the binary field builder app.
core-web/apps/dotcms-binary-field-builder/eslint.config.mjs Refactors flat ESLint config and disables prefer-on-push rule for parity.
core-web/apps/dotcdn/tsconfig.app.json Disables Angular strictTemplates for the dotcdn app.
core-web/apps/dotcdn/eslint.config.mjs Refactors flat ESLint config.
core-web/.nvmrc Updates Node pin to v22.22.3.
CLAUDE.md Updates Node version guidance to 22.22.3+.
.nvmrc Updates Node pin to v22.22.3.
.github/copilot-instructions.md Updates Node version guidance/examples to 22.22.3+.
Review details
  • Files reviewed: 58/59 changed files
  • Comments generated: 5
  • Review effort level: Lite

We're testing this review assessment. Please use 👍 or 👎 to tell us if it's correct.

Comment thread core-web/apps/dotcms-ui/tsconfig.app.json
Comment thread core-web/apps/dotcms-ui/eslint.config.mjs
Comment thread core-web/libs/ui/eslint.config.mjs
- Updates the pinned nx version and regenerates the pnpm lockfile to match, pulling in the corresponding transitive dependency graph changes for @nx/* packages.
- Aligns @angular/* packages with the latest 22.1.x patch release
- Follows the @nx/* toolchain bump to 23.1.1 across all Nx plugins
- Updates ng-packagr and related devkit/build-angular versions to match
…lar 22 across multiple applications

- Updated tsconfig.app.json files in dotcdn, dotcms-binary-field-builder, dotcms-block-editor, and dotcms-ui to include a TODO comment regarding the re-enabling of strictTemplates once Angular 22 template errors are resolved.
Moved workflow-actions-dialog.spec.ts from edit-content/sidebar to edit-content/workflows to better reflect the test's subject area.
- Angular 21/22's tighter change detection left the form hidden
  because the async role fetch in ngOnInit updated state without
  triggering a CD pass, leaving `@if (form)` unrendered inside the
  dialog's appendTo="body" view.
- Inject ChangeDetectorRef and call detectChanges() after setup to
  force the view to render once roles resolve.
Replace inline `import('@playwright/test').Page` type expressions with the named `Page` import for readability.
@nicobytes

Copy link
Copy Markdown
Member Author

Follow-up (Actions runtime)

After this PR merges, #36850 will bump GitHub Actions to Node 24 runtime majors (checkout@v7, cache@v6, upload-artifact@v7, download-artifact@v8, setup-node@v7, pnpm/action-setup@v6) in a dedicated PR.

That work is intentionally out of scope here — this PR covers project Node (.nvmrc); #36850 covers Actions runtime deprecation.

@mergify

mergify Bot commented Jul 31, 2026

Copy link
Copy Markdown

Tick the box to add this pull request to the merge queue (same as @mergifyio queue).

  • Queue this pull request

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Area : Documentation PR changes documentation files Area : Frontend PR changes Angular/TypeScript frontend code Team : Falcon

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

Migrate Angular 21 → Angular 22 (TypeScript 6) across the core-web Nx workspace

3 participants