Angular 22 - #301
Merged
Merged
Conversation
Amongst other things, this update eslint and their rules, helping us prepare for incoming Angular 22.
Except: - @types/node, we run on node 22 - typescript, angular is not ready
Was added by Angular migration but is not neccessary for us
There was a problem hiding this comment.
Pull request overview
This PR performs an Angular v22 migration across the workspace (app + projects/natural + projects/natural-editor), aligning configuration, dependencies, and Angular code patterns with the new version.
Changes:
- Upgraded Angular dependencies to
^22.1.x(and related tooling likeng-packagr,angular-eslint,zone.js,typescript, etc.). - Refactored many components/services/tests to new Angular patterns (DI decorator changes, change detection configuration, template/control-flow cleanups).
- Simplified production setup by removing environment files and related build file replacements / prod-mode toggling.
Reviewed changes
Copilot reviewed 142 out of 144 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.json | Adjusted TS compiler options and path mappings for the Angular 22 upgrade. |
| src/main.ts | Updated bootstrap setup and router configuration for Angular 22. |
| src/environments/environment.ts | Removed legacy environment file as part of build config changes. |
| src/environments/environment.prod.ts | Removed legacy prod environment file as part of build config changes. |
| src/app/typography/typography.component.ts | Added explicit change detection strategy. |
| src/app/theme-merger/theme-merger.utils.ts | Reformatted union type definition. |
| src/app/theme-merger/theme-merger.component.ts | Updated imports and added explicit change detection strategy. |
| src/app/table-style/table-style.component.ts | Added explicit change detection strategy. |
| src/app/shared/services/any-link-mutation.service.ts | Updated service decorator usage for Angular 22. |
| src/app/shared/components/any/any.component.ts | Added explicit change detection strategy. |
| src/app/shared/buttons/buttons-set.component.ts | Added explicit change detection strategy. |
| src/app/select/select.component.ts | Added explicit change detection strategy. |
| src/app/select/select.component.html | Updated reactive-form control access pattern. |
| src/app/select-hierarchic/select-hierarchic.component.ts | Added explicit change detection strategy. |
| src/app/select-hierarchic/select-hierarchic.component.html | Updated reactive-form control access pattern. |
| src/app/select-enum/select-enum.component.ts | Added explicit change detection strategy. |
| src/app/search/search.component.ts | Added explicit change detection strategy. |
| src/app/relations/relations.component.ts | Added explicit change detection strategy. |
| src/app/panels/panels.component.ts | Added explicit change detection strategy. |
| src/app/other/other.component.ts | Added explicit change detection strategy and adjusted DI field placement. |
| src/app/other/other.component.html | Template formatting cleanup. |
| src/app/navigable-list/navigable-list.component.ts | Added explicit change detection strategy. |
| src/app/navigable-list/navigable-list.component.html | Template formatting cleanup. |
| src/app/modal-placeholder/modal-placeholder.component.ts | Added explicit change detection strategy. |
| src/app/list/list.component.ts | Added explicit change detection strategy. |
| src/app/list/list.component.spec.ts | Updated test service decorator usage. |
| src/app/list/list.component.html | Template formatting cleanup. |
| src/app/homepage/homepage.component.ts | Added explicit change detection strategy. |
| src/app/home/home.component.ts | Added explicit change detection strategy. |
| src/app/hierarchic/hierarchic.component.ts | Added explicit change detection strategy. |
| src/app/file/file.service.ts | Updated service decorator usage for Angular 22. |
| src/app/file/file.component.ts | Added explicit change detection strategy. |
| src/app/editor/editor.component.ts | Added explicit change detection strategy. |
| src/app/editable-list/editable-list.component.ts | Added explicit change detection strategy. |
| src/app/detail/detail.component.ts | Added explicit change detection strategy. |
| src/app/detail-header/detail-header.component.ts | Added explicit change detection strategy. |
| src/app/demo.error-handler.ts | Updated service decorator usage for Angular 22. |
| src/app/debug-form.component.ts | Added explicit change detection strategy. |
| src/app/avatar/avatar.component.ts | Added explicit change detection strategy. |
| src/app/app.component.ts | Added explicit change detection strategy. |
| src/app/alert/alert.component.ts | Added explicit change detection strategy. |
| projects/natural/tsconfig.lib.json | Updated Angular compiler options for the library build. |
| projects/natural/src/lib/testing/post.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/testing/null.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/testing/not-configured.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/testing/no-result.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/testing/mock-apollo.provider.ts | Updated DI/service decorator usage in test support. |
| projects/natural/src/lib/testing/item.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/testing/error.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/testing/any-enum.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/services/theme.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/services/swiss-parsing-date-adapter.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/services/persistence.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/services/link-mutation.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/services/error.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/services/enum.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/services/debounce.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/modules/table-button/table-button.component.html | Refactored control-flow and link rendering logic. |
| projects/natural/src/lib/modules/sidenav/sidenav/sidenav.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/sidenav/sidenav.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/modules/sidenav/sidenav-stack.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/modules/sidenav/sidenav-content/sidenav-content.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/sidenav/sidenav-container/sidenav-container.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/select/testing/utils.ts | Minor field ordering adjustment in test host. |
| projects/natural/src/lib/modules/select/select/select.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/select/select/select.component.spec.ts | Added explicit change detection strategy to host test components. |
| projects/natural/src/lib/modules/select/select-hierarchic/select-hierarchic.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/select/select-hierarchic/select-hierarchic.component.spec.ts | Added explicit change detection strategy to host test components. |
| projects/natural/src/lib/modules/select/select-enum/select-enum.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/select/select-enum/select-enum.component.spec.ts | Added explicit change detection strategy to host test components. |
| projects/natural/src/lib/modules/select/abstract-select.component.ts | Reordered DI field initialization. |
| projects/natural/src/lib/modules/search/search/search.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/search/input/input.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/search/group/group.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/search/facet-selector/facet-selector.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/search/dropdown-container/dropdown.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/modules/search/dropdown-container/dropdown-container.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/search/classes/graphql-doctrine.spec.ts | Tightened typing in tests (reduced any casts). |
| projects/natural/src/lib/modules/relations/relations.component.ts | Added explicit change detection strategy and updated null-check logic. |
| projects/natural/src/lib/modules/panels/panels.spec.ts | Added explicit change detection strategy in test components. |
| projects/natural/src/lib/modules/panels/panels.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/modules/panels/panels.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/matomo/matomo.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/modules/matomo/matomo.service.spec.ts | Added explicit change detection strategy in test component. |
| projects/natural/src/lib/modules/logger/error-handler.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/modules/icon/icon.directive.spec.ts | Added explicit change detection strategy in test component. |
| projects/natural/src/lib/modules/hierarchic-selector/hierarchic-selector/hierarchic-selector.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/modules/hierarchic-selector/hierarchic-selector/hierarchic-selector.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/hierarchic-selector/hierarchic-selector/hierarchic-selector.component.spec.ts | Tightened typing in tests (satisfies). |
| projects/natural/src/lib/modules/hierarchic-selector/hierarchic-selector-dialog/hierarchic-selector-dialog.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/modules/hierarchic-selector/hierarchic-selector-dialog/hierarchic-selector-dialog.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/fixed-button-detail/fixed-button-detail.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/file/file.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/modules/file/file-select.directive.spec.ts | Added explicit change detection strategy in test component. |
| projects/natural/src/lib/modules/file/file-drop.directive.spec.ts | Added explicit change detection strategy in test component. |
| projects/natural/src/lib/modules/file/component/file.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/file/component/file.component.spec.ts | Added explicit change detection strategy in test components. |
| projects/natural/src/lib/modules/file/abstract-file.ts | Reordered DI field initialization. |
| projects/natural/src/lib/modules/dropdown-components/type-text/type-text.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/dropdown-components/type-select/type-select.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/dropdown-components/type-options/type-options.component.ts | Added explicit change detection strategy and minor initialization ordering changes. |
| projects/natural/src/lib/modules/dropdown-components/type-number/type-number.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/dropdown-components/type-natural-select/type-natural-select.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/dropdown-components/type-hierarchic-selector/type-hierarchic-selector.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/dropdown-components/type-date/type-date.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/dropdown-components/type-date/type-date.component.spec.ts | Updated test service decorator usage. |
| projects/natural/src/lib/modules/dropdown-components/type-date-range/type-date-range.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/dropdown-components/type-boolean/type-boolean.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/dropdown-components/type-account-selector/type-account-selector.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/dialog-trigger/dialog-trigger.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/detail-header/detail-header.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/common/services/seo.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/modules/common/services/seo.service.spec.ts | Added explicit change detection strategy in test component. |
| projects/natural/src/lib/modules/common/services/memory-storage.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/modules/common/pipes/error-message.pipe.spec.ts | Minor type formatting simplification. |
| projects/natural/src/lib/modules/common/directives/src-density.directive.spec.ts | Added explicit change detection strategy in test component. |
| projects/natural/src/lib/modules/common/directives/linkable-tab.directive.spec.ts | Added explicit change detection strategy in test components. |
| projects/natural/src/lib/modules/common/directives/background-density.directive.spec.ts | Added explicit change detection strategy in test component. |
| projects/natural/src/lib/modules/columns-picker/columns-picker.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/avatar/service/avatar.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/modules/alert/confirm.component.ts | Added explicit change detection strategy. |
| projects/natural/src/lib/modules/alert/alert.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/directives/typed-mat-cell-def.directive.ts | Added lint suppression for unused template context guard argument. |
| projects/natural/src/lib/classes/network-activity.service.ts | Updated service decorator usage for Angular 22. |
| projects/natural/src/lib/classes/create-error-handler.spec.ts | Adjusted test error object typing. |
| projects/natural/src/lib/classes/abstract-list.ts | Reordered DI field initialization. |
| projects/natural/src/lib/classes/abstract-list.spec.ts | Added explicit change detection strategy in test component. |
| projects/natural/src/lib/classes/abstract-editable-list.spec.ts | Added lint suppression for type assertion test fixture. |
| projects/natural/src/lib/classes/abstract-detail.ts | Reordered DI field initialization. |
| projects/natural/src/lib/classes/abstract-detail.spec.ts | Added explicit change detection strategy and updated test service decorator usage. |
| projects/natural/package.json | Updated peer dependency ranges to Angular 22. |
| projects/natural-editor/tsconfig.lib.prod.json | Updated path mapping for packaged build output. |
| projects/natural-editor/src/lib/utils/image.ts | Updated service decorator usage for Angular 22. |
| projects/natural-editor/src/lib/link-dialog/link-dialog.component.ts | Added explicit change detection strategy. |
| projects/natural-editor/src/lib/id-dialog/id-dialog.component.ts | Added explicit change detection strategy. |
| projects/natural-editor/src/lib/editor/editor.component.ts | Added explicit change detection strategy and removed deprecated lint suppression. |
| projects/natural-editor/src/lib/editor/editor.component.spec.ts | Added explicit change detection strategy in test component. |
| projects/natural-editor/src/lib/custom-css/custom-css.directive.spec.ts | Added explicit change detection strategy in test component. |
| projects/natural-editor/src/lib/color-dialog/color-dialog.component.ts | Added explicit change detection strategy. |
| projects/natural-editor/src/lib/class-dialog/class-dialog.component.ts | Added explicit change detection strategy. |
| projects/natural-editor/package.json | Updated peer dependency ranges to Angular 22. |
| package.json | Upgraded Angular + ecosystem dependencies/devDependencies (incl. TS and tooling). |
| angular.json | Removed environment file replacements from the production configuration. |
Suppressed comments (1)
projects/natural/src/lib/modules/table-button/table-button.component.html:60
- Links opened with
target="_blank"should includerel="noopener noreferrer"to prevent tabnabbing and to avoid giving the new page access towindow.opener.
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| imports: [AsyncPipe, NaturalGroupComponent, MatIconButton, MatTooltip, MatIcon, NaturalIconDirective, MatDivider], | ||
| templateUrl: './search.component.html', | ||
| styleUrl: './search.component.scss', | ||
| changeDetection: ChangeDetectionStrategy.Eager, |
Comment on lines
+47
to
+53
| <a | ||
| target="_blank" | ||
| [matButton]="appearance()" | ||
| [attr.href]="href()" | ||
| [color]="color()" | ||
| [disabled]="disabled()" | ||
| > |
| } | ||
| </span> | ||
| } | ||
| @default never; |
Comment on lines
+236
to
238
| if (this.main?.permissions) { | ||
| this.disabled = this.disabled || !this.main.permissions.update; | ||
| } |
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.