Skip to content

chore(dependencies): update Node.js version and Angular v22, TS 6 #36623

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

chore(dependencies): update Node.js version and Angular v22, TS 6 #36623
nicobytes wants to merge 12 commits into
mainfrom
35930-migrate-angular-21-angular-22-typescript-6-across-the-core-web-nx-workspace

Conversation

@nicobytes

@nicobytes nicobytes commented Jul 17, 2026 •
edited by github-actions Bot
Loading

Copy link
Copy Markdown
Member

This pull request updates Node.js to version 22.22.3 across the project and refactors Angular ESLint configurations for better maintainability and clarity. It also relaxes Angular template strictness in several tsconfig files, simplifies test and story file exclusions, and makes a small adjustment to URL sanitization in the block editor utility.

Node.js version update:

  • Updated .nvmrc, core-web/.nvmrc, and documentation references to require Node.js v22.22.3 instead of v22.15.0. (.nvmrc, core-web/.nvmrc, CLAUDE.md, ONBOARDING.md) [1] [2] [3]

ESLint configuration refactoring:

  • Replaced use of FlatCompat for Angular template processing with direct rule configuration in all Angular ESLint configs, simplifying the setup and making rule overrides explicit. (core-web/apps/dotcdn/eslint.config.mjs, core-web/apps/dotcms-block-editor/eslint.config.mjs, core-web/apps/dotcms-ui/eslint.config.mjs, core-web/libs/block-editor/eslint.config.mjs, core-web/libs/data-access/eslint.config.mjs, core-web/libs/dot-layout-grid/eslint.config.mjs, core-web/libs/dot-rules/eslint.config.mjs, core-web/libs/dotcms-js/eslint.config.mjs) [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13]

  • Disabled @angular-eslint/prefer-on-push-component-change-detection in several configs for migration compatibility. [1] [2] [3] [4]

TypeScript and Angular compiler options:

  • Set "strictTemplates": false in angularCompilerOptions for multiple tsconfig.app.json files to relax Angular template strictness for migration. (core-web/apps/dotcdn/tsconfig.app.json, core-web/apps/dotcms-binary-field-builder/tsconfig.app.json, core-web/apps/dotcms-block-editor/tsconfig.app.json, core-web/apps/dotcms-ui/tsconfig.app.json) [1] [2] [3]

  • Cleaned up exclude arrays in tsconfig files and removed story file exclusions from test coverage collection. (core-web/libs/block-editor/tsconfig.lib.json, core-web/jest.preset.js) [1] [2]

Block editor utility adjustment:

  • Removed direct use of Angular's internal DomSanitizer for icon data URLs and now casts trusted URLs directly to SafeUrl for simplicity and compatibility. (core-web/libs/block-editor/src/lib/shared/utils/suggestion.utils.ts) [1] [2] [3]

This PR fixes: #35930

Copilot AI review requested due to automatic review settings July 17, 2026 16:19
@github-actions github-actions Bot mentioned this pull request Jul 17, 2026
Open
13 tasks
@github-actions github-actions Bot added Area : Documentation PR changes documentation files Area : Frontend PR changes Angular/TypeScript frontend code labels Jul 17, 2026
@claude

claude Bot commented Jul 17, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Claude finished @nicobytes's task in 3m 30s —— View job

PR Review — Angular 22 / TS 6 migration (#36623)

  • Analyze the diff against origin/main
  • Review key logic changes (suggestion.utils, timeline component, block editor)
  • Check config/dependency changes (package.json, tsconfig, eslint)
  • Post review findings

This is a large but mostly mechanical migration (dependency bumps + ESLint flat-config refactor). I focused on the non-mechanical logic changes. Good news: the two substantive issues Copilot flagged early have since been genuinely fixed in the current branch.

New Issues

  • 🟡 Medium: core-web/libs/block-editor/src/lib/shared/components/suggestions/suggestions.component.ts:12 — the import { MenuItem } from 'primeng/api'; line has a stray leading space ( import). This will fail Prettier/lint. Notably the last two commits on this branch were titled "remove unnecessary whitespace in import statement" yet the artifact is still present — the fix didn't land. Fix this →

  • 🟡 Medium: core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.ts:51-57 — safeUrl is a getter bound to [src] in the template, so it runs on every change-detection pass and bypassSecurityTrustUrl() returns a new SafeUrl object each call. That defeats binding identity checks and forces Angular to re-process the <img src> each CD cycle. Minor for a small slash-command list, but prefer computing the trusted URL once (e.g. in ngOnInit, alongside the existing icon calc) and binding the cached value.

  • 🟡 Medium: core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.ts:52 — bypassSecurityTrustUrl is applied to any data: URL. Since it feeds <img [src]>, restricting to image payloads (this.url.startsWith('data:image/')) narrows the trust surface. Low risk (image src can't execute script), but tightens intent. (Also raised by Copilot.)

  • 🟡 Medium: core-web/jest.preset.js:7 — removing !src/**/*.stories.ts from collectCoverageFrom pulls Storybook story files into coverage collection across every project. If any project enforces coverage thresholds this can shift/lower reported coverage. Confirm this was intentional; if it's only needed for the migration, consider keeping the exclusion.

  • 🟡 Medium: core-web/tsconfig.base.json:17-18 — "strict": false is now set at the workspace base level, relaxing type-checking for every project that inherits it, and ignoreDeprecations: "6.0" is a transitional TS6 flag with no tracked removal plan. These are reasonable to unblock the migration, but they're broad, easy-to-forget tech debt. Worth a tracking issue / note in docs/frontend/ANGULAR_STANDARDS.md so strict gets re-enabled per project and the flag gets removed later.

  • 🟡 Medium: core-web/package.json:54 — @angular/cdk is pinned to 22.0.5 while the rest of the Angular framework packages are 22.0.7. Align to 22.0.7 unless there's a known incompatibility, to avoid peer-dependency drift. (Raised by Copilot.)

Resolved

  • ✅ core-web/libs/block-editor/src/lib/shared/utils/suggestion.utils.ts — the earlier url as SafeUrl type-only cast is gone. Icons now pass through as plain strings, and real sanitization was reintroduced via DomSanitizer.bypassSecurityTrustUrl in SuggestionsListItemComponent.safeUrl. Data-URL icon rendering is covered by the new spec (suggestions-list-item.component.spec.ts).
  • ✅ dot-history-timeline-list.component.ts:18-32 — $timelineKey no longer relies solely on id. getTimelineItemKey now checks inode (versions → DotCMSContentletVersion.inode) and bundleId (push publish → DotPushPublishHistoryItem.bundleId) before falling back, so the key actually changes when the list changes and the @for-based <p-timeline> recreation works. Verified against both model interfaces.
  • ✅ ESLint configs — FlatCompat/compat dead code has been removed from the refactored Angular configs; only apps/dotcms-ui-e2e and libs/sdk/react still legitimately use it.
  • ✅ core-web/pnpm-lock.yaml — lockfile update is included in the PR (+3589/-3455).

Nothing here is blocking — no 🔴/🟠 findings. The Medium items are worth addressing before merge, especially the stray-whitespace lint failure at suggestions.component.ts:12 which will likely break the lint CI gate.
• Branch

@nicobytes
chore(dependencies): update Node.js version to 22.22.3 and streamline…
fd14137 
… 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.
@nicobytes
nicobytes requested a review from a team as a code owner July 17, 2026 16:25
Copilot AI reviewed Jul 17, 2026
View reviewed changes

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.

Pull request overview

This pull request upgrades the core-web workspace to Angular 22 / TypeScript 6, bumps the required Node.js version to v22.22.3, and refactors multiple ESLint flat-config files to simplify Angular lint rule overrides during migration.

Changes:

  • Updated Node.js version requirements and docs (.nvmrc, core-web/.nvmrc, onboarding docs).
  • Upgraded Angular/Nx/TypeScript dependencies and introduced TypeScript 6 migration flags (ignoreDeprecations: "6.0", relaxed strictTemplates).
  • Refactored Angular ESLint flat configs (removing FlatCompat template processing blocks) and adjusted a block-editor URL “sanitization” helper.

Reviewed changes

Copilot reviewed 41 out of 42 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
ONBOARDING.md Updates Node version requirement text.
dotFrontendOnboarding.md Updates Node version requirement text (but leaves other stack versions stale).
docs/frontend/ANGULAR_STANDARDS.md Updates frontend standards doc to Angular 22 / TS 6 / Nx 23 era.
core-web/tsconfig.base.json Adds TS6 migration flags (ignoreDeprecations) and explicit strict: false.
core-web/package.json Upgrades Angular/Nx/TypeScript and adds pnpm peer dependency rules.
core-web/libs/utils/eslint.config.mjs Refactors Angular ESLint flat config away from compat inline-template processing block.
core-web/libs/utils-testing/eslint.config.mjs Same ESLint refactor + disables OnPush preference rule for migration.
core-web/libs/ui/src/lib/components/dot-severity-icon/dot-severity-icon.component.spec.ts Updates tests to assert PrimeIcons classes instead of icon components.
core-web/libs/ui/src/lib/components/dot-severity-icon/dot-severity-icon.component.html Switches icon rendering to PrimeIcons <i class="pi ...">.
core-web/libs/ui/eslint.config.mjs Refactors Angular ESLint flat config + disables OnPush preference rule for migration.
core-web/libs/template-builder/tsconfig.lib.json Simplifies exclude list.
core-web/libs/template-builder/eslint.config.mjs Refactors Angular ESLint flat config + disables OnPush preference rule for migration.
core-web/libs/portlets/edit-ema/ui/eslint.config.mjs Refactors Angular ESLint flat config + disables OnPush preference rule for migration.
core-web/libs/portlets/edit-ema/portlet/eslint.config.mjs Refactors Angular ESLint flat config + disables OnPush preference rule for migration.
core-web/libs/portlets/dot-experiments/portlet/eslint.config.mjs Refactors Angular ESLint flat config away from compat inline-template processing block.
core-web/libs/portlets/dot-experiments/data-access/eslint.config.mjs Refactors Angular ESLint flat config away from compat inline-template processing block.
core-web/libs/new-block-editor/eslint.config.mjs Refactors Angular ESLint flat config + disables OnPush preference rule for migration.
core-web/libs/edit-content/eslint.config.mjs Refactors Angular ESLint flat config + disables OnPush preference rule for migration.
core-web/libs/edit-content-bridge/tsconfig.lib.json Simplifies exclude list.
core-web/libs/dotcms-js/eslint.config.mjs Refactors Angular ESLint flat config away from compat inline-template processing block.
core-web/libs/dot-rules/eslint.config.mjs Refactors Angular ESLint flat config + disables OnPush preference rule for migration.
core-web/libs/dot-layout-grid/eslint.config.mjs Refactors Angular ESLint flat config away from compat inline-template processing block.
core-web/libs/data-access/eslint.config.mjs Refactors Angular ESLint flat config away from compat inline-template processing block.
core-web/libs/block-editor/tsconfig.lib.json Simplifies exclude list.
core-web/libs/block-editor/src/lib/shared/utils/suggestion.utils.ts Changes URL “sanitization” implementation for suggestion icon data URLs.
core-web/libs/block-editor/eslint.config.mjs Refactors Angular ESLint flat config + disables OnPush preference rule for migration.
core-web/jest.preset.js Removes story exclusion from coverage collection.
core-web/apps/dotcms-ui/tsconfig.app.json Disables Angular strictTemplates for migration.
core-web/apps/dotcms-ui/eslint.config.mjs Refactors Angular ESLint flat config + disables OnPush preference rule for migration.
core-web/apps/dotcms-block-editor/tsconfig.app.json Disables Angular strictTemplates for migration.
core-web/apps/dotcms-block-editor/eslint.config.mjs Refactors Angular ESLint flat config away from compat inline-template processing block.
core-web/apps/dotcms-binary-field-builder/tsconfig.app.json Disables Angular strictTemplates for migration.
core-web/apps/dotcms-binary-field-builder/eslint.config.mjs Refactors Angular ESLint flat config + disables OnPush preference rule for migration.
core-web/apps/dotcdn/tsconfig.app.json Disables Angular strictTemplates for migration.
core-web/apps/dotcdn/eslint.config.mjs Refactors Angular ESLint flat config away from compat inline-template processing block.
core-web/.nvmrc Pins Node to v22.22.3.
CLAUDE.md Updates Node version requirement text.
.nvmrc Pins Node to v22.22.3.

Comment thread core-web/libs/block-editor/src/lib/shared/utils/suggestion.utils.ts Outdated
Comment thread dotFrontendOnboarding.md Outdated
Comment thread core-web/apps/dotcms-ui/eslint.config.mjs Outdated
@nicobytes
chore(dependencies): update Angular and Nx versions, enhance ESLint c…
8695e1e 
…onfig, and improve frontend onboarding documentation
@nicobytes
nicobytes requested a review from Copilot July 17, 2026 16:37
Copilot AI reviewed Jul 17, 2026
View reviewed changes

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.

Pull request overview

Copilot reviewed 53 out of 54 changed files in this pull request and generated 19 comments.

Comment thread core-web/libs/utils-testing/eslint.config.mjs
Comment thread core-web/libs/template-builder/eslint.config.mjs
Comment thread core-web/libs/edit-content/eslint.config.mjs
Comment thread core-web/apps/dotcms-block-editor/eslint.config.mjs
Comment thread core-web/apps/dotcms-binary-field-builder/eslint.config.mjs
Comment thread ...-sidebar-history/components/dot-history-timeline-list/dot-history-timeline-list.component.ts
Comment thread ...mponents/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.ts
Comment thread core-web/package.json
Comment thread core-web/package.json
Comment thread core-web/tsconfig.base.json
@nicobytes
refactor(eslint): remove unused FlatCompat imports from ESLint config…
c318982 
…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.
nicobytes added 3 commits July 17, 2026 13:06
@nicobytes
refactor(content-types): migrate add-to-menu logic to signals and upd…
3d5b9dc 
…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.
@nicobytes
test(dot-history-timeline-list): enhance unit tests for timeline key …
f1676de 
…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.
@nicobytes
refactor(content-types-layout): improve HTML structure and clean up u…
d1061cf 
…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.
@nicobytes nicobytes changed the title chore(dependencies): update Node.js version and Angular packages chore(dependencies): update Node.js version and Angular v22, TS 6 Jul 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

AI: Safe To Rollback Area : Documentation PR changes documentation files Area : Frontend PR changes Angular/TypeScript frontend code

Projects

dotCMS - Product Planning
Status: No status

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

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

2 participants

@nicobytes