Use Angular 22 in demos#34038
Open
GoodDayForSurf wants to merge 94 commits into
Open
Conversation
…26_1_WIP_check_ng22 # Conflicts: # pnpm-lock.yaml
+ update lock
…26_1_WIP_check_ng22 # Conflicts: # apps/demos/package.json # pnpm-lock.yaml
…26_1_WIP_check_ng22 # Conflicts: # apps/demos/package.json # pnpm-lock.yaml
…26_1_WIP_check_ng22 # Conflicts: # pnpm-lock.yaml
…lt for compatibility with previous versions of NG
…26_1_use_ng22_in_demos # Conflicts: # pnpm-lock.yaml
…26_1_use_ng22_in_demos # Conflicts: # pnpm-lock.yaml
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the apps/demos project and related tooling/configuration to run demos against Angular 22 (and newer TypeScript), including tweaks for SystemJS-based in-browser transpilation, CSP bundling, and type/lint checks.
Changes:
- Bump Angular dependencies in demos to
^22.0.0and update related runtime deps (e.g.,zone.js), plus TypeScript-related config adjustments. - Add/adjust TypeScript configs and demo loaders to accommodate TS 6 deprecations (
ignoreDeprecations) and new compilation needs (Vue SFC loader, JSON module typings). - Introduce a shared
anti-forgerytype shim and update lint/type-check paths so demo imports don’t require inline eslint disables.
Reviewed changes
Copilot reviewed 65 out of 69 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-workspace.yaml | Updates shared tool catalog versions (TypeScript/@types-node). |
| packages/nx-infra-plugin/src/executors/vectormap/vectormap.impl.ts | Adjusts Buffer→ArrayBuffer conversion used by vectormap executor. |
| packages/devextreme-monorepo-tools/tsconfig.build.json | Enables skipLibCheck for build TS config. |
| packages/devextreme-monorepo-tools/package.json | Aligns dev deps with workspace catalogs (TS/@types-node). |
| packages/devextreme-metadata/package.json | Adds TypeScript devDependency via catalog. |
| package.json | Moves @types/node + TypeScript to workspace catalog usage. |
| apps/demos/utils/ts-to-js-converter/converter.ts | Extends converter compilation config (extra includes, ignoreDeprecations). |
| apps/demos/utils/server/tsconfig.csp-bundle-angular.json | Adds ignoreDeprecations for TS config used in bundling. |
| apps/demos/utils/server/csp-bundle.js | Ensures script exits cleanly after successful bundling. |
| apps/demos/utils/server/csp-bundle-angular.js | Ensures script exits cleanly after successful Angular bundling. |
| apps/demos/utils/demo-vue-loader.js | New Vue SFC SystemJS loader with TS compiler options passthrough. |
| apps/demos/utils/demo-ts-loader.js | Updates TS loader to ES2015 target/module + configurable compiler options. |
| apps/demos/tsconfig.vue-check.json | Updates Vue typecheck config (includes .d.ts, ignoreDeprecations). |
| apps/demos/tsconfig.react-check.json | Updates React typecheck config (ignoreDeprecations, include anti-forgery types). |
| apps/demos/tsconfig.ngc-check.json | Updates Angular ngc typecheck config (ignoreDeprecations, include anti-forgery types). |
| apps/demos/tsconfig.json | Broad TS compiler option updates for demos (strict/allowJs/ignoreDeprecations). |
| apps/demos/tsconfig.eslint.json | Adds anti-forgery type shim into ESLint TS project include. |
| apps/demos/shared/anti-forgery/index.d.ts | Adds a shared module declaration shim for anti-forgery. |
| apps/demos/package.json | Bumps Angular deps to v22, TypeScript to ~6.0.0, updates zone.js, etc. |
| apps/demos/eslint.config.mjs | Adjusts spellcheck skips and adds import/no-unresolved ignore for anti-forgery. |
| apps/demos/Demos/TreeView/ItemSelectionAndCustomization/Angular/app/app.component.ts | Adds change detection config for Angular demo. |
| apps/demos/Demos/TreeList/WebAPIService/ReactJs/index.js | Removes inline eslint disable; relies on central ignore for anti-forgery. |
| apps/demos/Demos/Tabs/Selection/Angular/app/app.component.ts | Adds change detection config for Angular demo. |
| apps/demos/Demos/Stepper/FormIntegration/Angular/app/confirmation/confirmation.component.ts | Adds change detection config for Angular demo. |
| apps/demos/Demos/Stepper/FormIntegration/Angular/app/app.component.ts | Adds change detection config for Angular demo. |
| apps/demos/Demos/Splitter/Overview/Angular/app/app.component.ts | Adds change detection config for Angular demo. |
| apps/demos/Demos/SelectBox/SearchAndEditing/Angular/app/app.component.ts | Adds change detection config for Angular demo. |
| apps/demos/Demos/Scheduler/WebAPIService/ReactJs/index.js | Removes inline eslint disable; relies on central ignore for anti-forgery. |
| apps/demos/Demos/Scheduler/WebAPIService/React/index.tsx | Removes inline eslint disable; relies on central ignore for anti-forgery. |
| apps/demos/Demos/Scheduler/SignalRService/ReactJs/index.js | Removes inline eslint disable; relies on central ignore for anti-forgery. |
| apps/demos/Demos/Scheduler/SignalRService/React/index.tsx | Removes inline eslint disable; relies on central ignore for anti-forgery. |
| apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.ts | Adds missing Angular import (NgClass) to standalone imports. |
| apps/demos/Demos/Scheduler/DragAndDrop/Angular/app/app.component.ts | Adds change detection config for Angular demo. |
| apps/demos/Demos/Popup/Scrolling/Angular/app/app.component.ts | Adds change detection config for Angular demo. |
| apps/demos/Demos/MultiView/Overview/Angular/app/app.component.ts | Adds change detection config for Angular demo. |
| apps/demos/Demos/Localization/UsingIntl/Vue/systemjs-imports.d.ts | Adds SystemJS JSON module typings for Vue demo. |
| apps/demos/Demos/Localization/UsingIntl/Vue/App.vue | Switches JSON imports to typed default imports (removes @ts-ignore). |
| apps/demos/Demos/Localization/UsingGlobalize/Vue/systemjs-imports.d.ts | Adds SystemJS JSON + globalize module typings for Vue demo. |
| apps/demos/Demos/Localization/UsingGlobalize/Vue/App.vue | Switches JSON/globalize imports to typed default imports (removes @ts-ignore). |
| apps/demos/Demos/List/Selection/Angular/app/app.component.ts | Adds change detection config for Angular demo. |
| apps/demos/Demos/List/DragAndDrop/Angular/app/app.component.ts | Adds change detection config for Angular demo. |
| apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.ts | Adds change detection config for Angular demo. |
| apps/demos/Demos/FileUploader/Validation/ReactJs/index.js | Removes inline eslint disable; relies on central ignore for anti-forgery. |
| apps/demos/Demos/FileUploader/FileUploading/ReactJs/index.js | Removes inline eslint disable; relies on central ignore for anti-forgery. |
| apps/demos/Demos/FileUploader/CustomDropzone/ReactJs/index.js | Removes inline eslint disable; relies on central ignore for anti-forgery. |
| apps/demos/Demos/Diagram/WebAPIService/ReactJs/index.js | Removes inline eslint disable; relies on central ignore for anti-forgery. |
| apps/demos/Demos/Diagram/ItemSelection/Angular/app/app.component.ts | Adds change detection config for Angular demo. |
| apps/demos/Demos/DataGrid/WebAPIService/ReactJs/index.js | Removes inline eslint disable; relies on central ignore for anti-forgery. |
| apps/demos/Demos/DataGrid/RowSelection/Angular/app/app.component.ts | Adds change detection config for Angular demo. |
| apps/demos/Demos/DataGrid/RemoteCRUDOperations/Angular/app/app.component.ts | Adds change detection config for Angular demo. |
| apps/demos/Demos/DataGrid/NewRecordPosition/ReactJs/index.js | Removes inline eslint disable; relies on central ignore for anti-forgery. |
| apps/demos/Demos/DataGrid/NewRecordPosition/Angular/app/app.component.ts | Adds change detection config for Angular demo. |
| apps/demos/Demos/DataGrid/DeferredSelection/Angular/app/app.component.ts | Adds change detection config for Angular demo. |
| apps/demos/Demos/DataGrid/DataValidation/ReactJs/index.js | Removes inline eslint disable; relies on central ignore for anti-forgery. |
| apps/demos/Demos/DataGrid/CustomEditors/ReactJs/index.js | Removes inline eslint disable; relies on central ignore for anti-forgery. |
| apps/demos/Demos/DataGrid/CollaborativeEditing/ReactJs/index.js | Removes inline eslint disable; relies on central ignore for anti-forgery. |
| apps/demos/Demos/DataGrid/BatchUpdateRequest/ReactJs/index.js | Removes inline eslint disable; relies on central ignore for anti-forgery. |
| apps/demos/Demos/Charts/TilingAlgorithms/Angular/app/app.component.ts | Adds change detection config for Angular demo. |
| apps/demos/Demos/Charts/ClientSideDataProcessing/Angular/app/app.component.ts | Adds change detection config for Angular demo. |
| apps/demos/Demos/CardView/WebAPIService/ReactJs/index.js | Removes inline eslint disable; relies on central ignore for anti-forgery. |
| apps/demos/Demos/CardView/DataValidation/ReactJs/index.js | Removes inline eslint disable; relies on central ignore for anti-forgery. |
| apps/demos/Demos/Accordion/Overview/Angular/app/app.component.ts | Adds change detection config for Angular demo. |
| apps/demos/configs/Vue/tsconfig.json | Adds ignoreDeprecations to Vue config TS options. |
| apps/demos/configs/Vue/config.js | Routes vue-loader to new project loader and passes TS options through SystemJS config. |
| apps/demos/configs/ReactJs/config.js | Adds ignoreDeprecations to in-browser TS options. |
| apps/demos/configs/React/config.js | Adds ignoreDeprecations to in-browser TS options. |
| apps/demos/configs/Angular/tsconfig.json | Adds ignoreDeprecations to Angular config TS options. |
| apps/demos/configs/Angular/config.js | Adds ignoreDeprecations to in-browser TS options. |
Comments suppressed due to low confidence (2)
apps/demos/Demos/Splitter/Overview/Angular/app/app.component.ts:25
@Component({...})haschangeDetectionspecified twice. In object literals the last key wins, soChangeDetectionStrategy.Eageris ignored here, and the duplicate is confusing/error-prone. Keep only onechangeDetectionsetting.
apps/demos/utils/demo-ts-loader.js:18if (ts === undefined)will throw aReferenceErrorwhentsisn’t defined (before your custom error is thrown). Use atypeofcheck so the loader fails with the intended message.
…26_1_use_ng22_in_demos # Conflicts: # package.json # pnpm-lock.yaml
…e_ng22_in_demos # Conflicts: # pnpm-lock.yaml
marker-dao
approved these changes
Jun 22, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.