chore: update to Angular21 #3527
Conversation
📝 WalkthroughWalkthroughAngular framework and ecosystem upgraded from v20 to v21, including Material, CDK, and dev tooling (Storybook, CLI, ESLint). CommonModule removed from standalone components, unused imports cleaned up, test utilities updated to async patterns, and deprecated TypeScript compiler options removed. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested reviewers
Poem
✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Deployed to https://pr-3527.aam-digital.net/ |
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
…ems (#3561) by using pagination fixes #3548 --------- Co-authored-by: Sebastian Leidig <[email protected]>
by a batch save and avoiding intermittent reloads of the list closes #2843 --------- Co-authored-by: Sebastian <[email protected]>
to simplify use of icon + text closes #3458
…arch text (#3538) fixes #3526 --------- Co-authored-by: Sebastian Leidig <[email protected]>
sleidig
force-pushed
the
refactor/upgrade-Angular21
branch
from
cf781b7 to
ac22fcd
Compare
There was a problem hiding this comment.
Pull request overview
This pull request upgrades the application from Angular 20 to Angular 21, addressing issue #3476. The upgrade includes dependency updates, removal of deprecated configurations, and test improvements to handle timing issues.
- Updates Angular framework and related packages from version 20 to 21
- Removes CommonModule imports from standalone components (no longer needed in Angular 21)
- Improves test reliability with better async handling using fakeAsync and firstValueFrom
- Removes obsolete TypeScript compiler options and unused imports
Reviewed changes
Copilot reviewed 16 out of 18 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Updates Angular core, Material, CLI, and related dependencies to version 21, along with other library updates |
| tsconfig.json | Removes deprecated compiler options (downlevelIteration, allowSyntheticDefaultImports) |
| src/app/utils/database-testing.module.ts | Adds proper wait for ConfigService initialization to fix timing issues in tests |
| src/app/core/export/query.service.spec.ts | Wraps tests in fakeAsync and adds tick() calls to handle async updates properly |
| src/app/core/entity/entity-mapper/entity-mapper.service.spec.ts | Refactors tests to use firstValueFrom for cleaner async handling |
| src/app/core/entity/default-datatype/default.datatype.ts | Removes unused asArray import and adds clarifying comment |
| src/app/core/basic-datatypes/date/date-range-filter/date-range-filter-panel/date-range-filter-panel.component.ts | Removes MAT_RANGE_DATE_SELECTION_MODEL_PROVIDER (no longer needed) |
| Multiple component files | Removes CommonModule imports from standalone components (automatic in Angular 21) |
| src/app/child-dev-project/children/demo-data-generators/fixtures/religions.ts | Removes $localize import (requires fix) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -1,5 +1,3 @@ | |||
| import { $localize } from "@angular/localize/init"; | |||
|
|
|||
| export const religions = [ | |||
There was a problem hiding this comment.
The import statement for $localize from "@angular/localize/init" was removed, but the code still uses $localize on lines 3-9. This will likely cause a runtime error unless $localize is available globally. Either the import should be restored, or this file needs to be updated to ensure $localize is available.
|
|
||
| import { EntityMapperService } from "./entity-mapper.service"; | ||
| import { Entity } from "../model/entity"; | ||
| import { Entity, EntityConstructor } from "../model/entity"; |
There was a problem hiding this comment.
Unused import EntityConstructor.
| import { Entity, EntityConstructor } from "../model/entity"; | |
| import { Entity } from "../model/entity"; |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In @src/app/core/entity/default-datatype/default.datatype.ts:
- Line 18: Remove the inline import of "@angular/localize/init" from
default.datatype.ts (delete the import of $localize in
src/app/core/entity/default-datatype/default.datatype.ts) and instead add a
single top-level import of "@angular/localize/init" in your application
bootstrap (polyfills.ts or main.ts) so $localize is provided once for the whole
app; also ensure your e2e test bootstrap uses the same polyfills/main so tests
pick up the global $localize rather than importing it in the DefaultDatatype
class.
🧹 Nitpick comments (1)
src/app/core/admin/admin-entity-details/admin-entity-panel-component/admin-entity-panel-component.component.ts (1)
60-66: Consider migrating to signal-based inputs and outputs.The component still uses
@Inputand@Outputdecorators. Consider migrating to the moderninput()andoutput()functions for better type safety and consistency with Angular's signal-based APIs.♻️ Example migration to signal-based APIs
- @Input() config: PanelComponent; - @Input() entityType: EntityConstructor; + config = input.required<PanelComponent>(); + entityType = input.required<EntityConstructor>(); /** * emitted when a related entity's schema has been modified. */ - @Output() relatedEntityModified = new EventEmitter<EntityConstructor>(); + relatedEntityModified = output<EntityConstructor>();Note: You'll need to update references from
this.configtothis.config()andthis.entityTypetothis.entityType()throughout the component, and usethis.relatedEntityModified.emit()as before.As per coding guidelines: "Prefer
input()andoutput()functions over@Inputand@Outputdecorators in Angular components."
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (17)
package.jsonsrc/app/child-dev-project/children/demo-data-generators/fixtures/religions.tssrc/app/child-dev-project/notes/admin-note-details/admin-note-details.component.tssrc/app/child-dev-project/notes/dashboard-widgets/important-notes-dashboard-settings.component/important-notes-dashboard-settings.component.tssrc/app/core/admin/admin-entity-details/admin-entity-panel-component/admin-entity-panel-component.component.tssrc/app/core/admin/admin-list-manager/admin-list-manager.component.tssrc/app/core/admin/admin-primary-action/admin-primary-action.component.tssrc/app/core/basic-datatypes/date/date-range-filter/date-range-filter-panel/date-range-filter-panel.component.tssrc/app/core/entity/default-datatype/default.datatype.tssrc/app/core/entity/entity-mapper/entity-mapper.service.spec.tssrc/app/core/export/query.service.spec.tssrc/app/core/ui/ui/ui.component.tssrc/app/features/dashboard-widgets/birthday-dashboard-widget/birthday-dashboard-settings.component/birthday-dashboard-settings.component.tssrc/app/features/dashboard-widgets/entity-count-dashboard-widget/entity-count-dashboard/entity-count-dashboard.component.tssrc/app/features/matching-entities/admin-matching-entities/edit-matching-entity-side/edit-matching-entity-side.component.tssrc/app/utils/database-testing.module.tstsconfig.json
💤 Files with no reviewable changes (6)
- src/app/core/basic-datatypes/date/date-range-filter/date-range-filter-panel/date-range-filter-panel.component.ts
- src/app/child-dev-project/notes/dashboard-widgets/important-notes-dashboard-settings.component/important-notes-dashboard-settings.component.ts
- src/app/core/ui/ui/ui.component.ts
- tsconfig.json
- src/app/features/dashboard-widgets/entity-count-dashboard-widget/entity-count-dashboard/entity-count-dashboard.component.ts
- src/app/child-dev-project/children/demo-data-generators/fixtures/religions.ts
🧰 Additional context used
📓 Path-based instructions (11)
**/*.component.ts
📄 CodeRabbit inference engine (AGENTS.md)
**/*.component.ts: Use standalone components (default behavior, do NOT setstandalone: true)
Preferinput()andoutput()functions over@Inputand@Outputdecorators in Angular components
Use signals for reactive state management withcomputed()for derived state
SetchangeDetection: ChangeDetectionStrategy.OnPushfor all components
Prefer inline templates for small components in Angular
Prefer Reactive Forms over Template-driven forms in Angular
UseNgOptimizedImagefor static images instead of base64 encoded images
Use Angular Material components for UI consistency following Material Design guidelines
Implement OnPush change detection strategy for performance optimization
Use trackBy functions for lists in Angular templates for performance optimization
Files:
src/app/core/admin/admin-primary-action/admin-primary-action.component.tssrc/app/features/dashboard-widgets/birthday-dashboard-widget/birthday-dashboard-settings.component/birthday-dashboard-settings.component.tssrc/app/core/admin/admin-entity-details/admin-entity-panel-component/admin-entity-panel-component.component.tssrc/app/child-dev-project/notes/admin-note-details/admin-note-details.component.tssrc/app/core/admin/admin-list-manager/admin-list-manager.component.tssrc/app/features/matching-entities/admin-matching-entities/edit-matching-entity-side/edit-matching-entity-side.component.ts
**/*.{component,service,directive,guard,interceptor,resolver,pipe}.ts
📄 CodeRabbit inference engine (AGENTS.md)
Use
inject()function instead of constructor injection for dependencies
Files:
src/app/core/admin/admin-primary-action/admin-primary-action.component.tssrc/app/features/dashboard-widgets/birthday-dashboard-widget/birthday-dashboard-settings.component/birthday-dashboard-settings.component.tssrc/app/core/admin/admin-entity-details/admin-entity-panel-component/admin-entity-panel-component.component.tssrc/app/child-dev-project/notes/admin-note-details/admin-note-details.component.tssrc/app/core/admin/admin-list-manager/admin-list-manager.component.tssrc/app/features/matching-entities/admin-matching-entities/edit-matching-entity-side/edit-matching-entity-side.component.ts
**/*.{component,service}.ts
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{component,service}.ts: Useupdate()orset()instead ofmutate()when modifying signals in Angular
Create interfaces for configuration objects and let component classes implement them
Files:
src/app/core/admin/admin-primary-action/admin-primary-action.component.tssrc/app/features/dashboard-widgets/birthday-dashboard-widget/birthday-dashboard-settings.component/birthday-dashboard-settings.component.tssrc/app/core/admin/admin-entity-details/admin-entity-panel-component/admin-entity-panel-component.component.tssrc/app/child-dev-project/notes/admin-note-details/admin-note-details.component.tssrc/app/core/admin/admin-list-manager/admin-list-manager.component.tssrc/app/features/matching-entities/admin-matching-entities/edit-matching-entity-side/edit-matching-entity-side.component.ts
**/*.{component,directive}.ts
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{component,directive}.ts: Do NOT use@HostBindingand@HostListenerdecorators; put host bindings inside thehostobject of@Componentor@Directivedecorator
Implement proper permissions checking via CASL integration usingEntityAbilityandDisableEntityOperationDirective
Files:
src/app/core/admin/admin-primary-action/admin-primary-action.component.tssrc/app/features/dashboard-widgets/birthday-dashboard-widget/birthday-dashboard-settings.component/birthday-dashboard-settings.component.tssrc/app/core/admin/admin-entity-details/admin-entity-panel-component/admin-entity-panel-component.component.tssrc/app/child-dev-project/notes/admin-note-details/admin-note-details.component.tssrc/app/core/admin/admin-list-manager/admin-list-manager.component.tssrc/app/features/matching-entities/admin-matching-entities/edit-matching-entity-side/edit-matching-entity-side.component.ts
src/**/*.ts
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.ts: Use strict type checking with TypeScript and avoidanytype; useunknownwhen type is uncertain
Prefer type inference in TypeScript when obvious
Files:
src/app/core/admin/admin-primary-action/admin-primary-action.component.tssrc/app/features/dashboard-widgets/birthday-dashboard-widget/birthday-dashboard-settings.component/birthday-dashboard-settings.component.tssrc/app/core/export/query.service.spec.tssrc/app/core/admin/admin-entity-details/admin-entity-panel-component/admin-entity-panel-component.component.tssrc/app/child-dev-project/notes/admin-note-details/admin-note-details.component.tssrc/app/core/admin/admin-list-manager/admin-list-manager.component.tssrc/app/features/matching-entities/admin-matching-entities/edit-matching-entity-side/edit-matching-entity-side.component.tssrc/app/utils/database-testing.module.tssrc/app/core/entity/entity-mapper/entity-mapper.service.spec.tssrc/app/core/entity/default-datatype/default.datatype.ts
src/**/*.{ts,js}
📄 CodeRabbit inference engine (AGENTS.md)
src/**/*.{ts,js}: Use ESLint for linting (npm run lint)
Use Prettier for code formatting
Files:
src/app/core/admin/admin-primary-action/admin-primary-action.component.tssrc/app/features/dashboard-widgets/birthday-dashboard-widget/birthday-dashboard-settings.component/birthday-dashboard-settings.component.tssrc/app/core/export/query.service.spec.tssrc/app/core/admin/admin-entity-details/admin-entity-panel-component/admin-entity-panel-component.component.tssrc/app/child-dev-project/notes/admin-note-details/admin-note-details.component.tssrc/app/core/admin/admin-list-manager/admin-list-manager.component.tssrc/app/features/matching-entities/admin-matching-entities/edit-matching-entity-side/edit-matching-entity-side.component.tssrc/app/utils/database-testing.module.tssrc/app/core/entity/entity-mapper/entity-mapper.service.spec.tssrc/app/core/entity/default-datatype/default.datatype.ts
**/*.component.{ts,html}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.component.{ts,html}: All user-facing strings must be translatable using Angular i18n markers or$localizein Aam Digital
Follow existing translation key patterns in Aam Digital
Use Angular Material accessibility features in components
Files:
src/app/core/admin/admin-primary-action/admin-primary-action.component.tssrc/app/features/dashboard-widgets/birthday-dashboard-widget/birthday-dashboard-settings.component/birthday-dashboard-settings.component.tssrc/app/core/admin/admin-entity-details/admin-entity-panel-component/admin-entity-panel-component.component.tssrc/app/child-dev-project/notes/admin-note-details/admin-note-details.component.tssrc/app/core/admin/admin-list-manager/admin-list-manager.component.tssrc/app/features/matching-entities/admin-matching-entities/edit-matching-entity-side/edit-matching-entity-side.component.ts
**/*.{component,service}.spec.ts
📄 CodeRabbit inference engine (AGENTS.md)
Write unit tests for all new components and services using Jasmine/Karma
Files:
src/app/core/export/query.service.spec.tssrc/app/core/entity/entity-mapper/entity-mapper.service.spec.ts
**/*.spec.ts
📄 CodeRabbit inference engine (AGENTS.md)
**/*.spec.ts: Mock dependencies properly using Angular testing utilities in unit tests
Use established testing patterns from the Aam Digital project in unit tests
Files:
src/app/core/export/query.service.spec.tssrc/app/core/entity/entity-mapper/entity-mapper.service.spec.ts
**/*entity*.{service,component}.ts
📄 CodeRabbit inference engine (AGENTS.md)
Use proper generics for entity types in TypeScript
Files:
src/app/core/admin/admin-entity-details/admin-entity-panel-component/admin-entity-panel-component.component.tssrc/app/features/matching-entities/admin-matching-entities/edit-matching-entity-side/edit-matching-entity-side.component.ts
**/*entity*.spec.ts
📄 CodeRabbit inference engine (AGENTS.md)
Test entity operations with proper data setup/teardown in unit tests
Files:
src/app/core/entity/entity-mapper/entity-mapper.service.spec.ts
🧠 Learnings (27)
📓 Common learnings
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*.component.ts : Use Angular Material components for UI consistency following Material Design guidelines
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*.component.{ts,html} : Use Angular Material accessibility features in components
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*.component.ts : Use standalone components (default behavior, do NOT set `standalone: true`)
Applied to files:
src/app/core/admin/admin-primary-action/admin-primary-action.component.tssrc/app/features/dashboard-widgets/birthday-dashboard-widget/birthday-dashboard-settings.component/birthday-dashboard-settings.component.tssrc/app/child-dev-project/notes/admin-note-details/admin-note-details.component.tssrc/app/features/matching-entities/admin-matching-entities/edit-matching-entity-side/edit-matching-entity-side.component.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*.component.ts : Implement OnPush change detection strategy for performance optimization
Applied to files:
src/app/core/admin/admin-primary-action/admin-primary-action.component.tssrc/app/features/dashboard-widgets/birthday-dashboard-widget/birthday-dashboard-settings.component/birthday-dashboard-settings.component.tssrc/app/child-dev-project/notes/admin-note-details/admin-note-details.component.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to src/app/core/common-components/**/*.component.ts : Shared components belong in `src/app/core/common-components/`
Applied to files:
src/app/core/admin/admin-primary-action/admin-primary-action.component.tssrc/app/child-dev-project/notes/admin-note-details/admin-note-details.component.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*.component.ts : Use Angular Material components for UI consistency following Material Design guidelines
Applied to files:
src/app/core/admin/admin-primary-action/admin-primary-action.component.tssrc/app/features/dashboard-widgets/birthday-dashboard-widget/birthday-dashboard-settings.component/birthday-dashboard-settings.component.tssrc/app/core/admin/admin-entity-details/admin-entity-panel-component/admin-entity-panel-component.component.tssrc/app/child-dev-project/notes/admin-note-details/admin-note-details.component.tssrc/app/core/admin/admin-list-manager/admin-list-manager.component.tssrc/app/features/matching-entities/admin-matching-entities/edit-matching-entity-side/edit-matching-entity-side.component.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*.{component,service}.ts : Create interfaces for configuration objects and let component classes implement them
Applied to files:
src/app/core/admin/admin-primary-action/admin-primary-action.component.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*entity*.service.ts : Use entity services for data access and caching in Aam Digital
Applied to files:
src/app/core/admin/admin-primary-action/admin-primary-action.component.tssrc/app/core/export/query.service.spec.tssrc/app/utils/database-testing.module.tssrc/app/core/entity/entity-mapper/entity-mapper.service.spec.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*.component.{ts,html} : Use Angular Material accessibility features in components
Applied to files:
src/app/core/admin/admin-primary-action/admin-primary-action.component.tssrc/app/features/dashboard-widgets/birthday-dashboard-widget/birthday-dashboard-settings.component/birthday-dashboard-settings.component.tssrc/app/core/admin/admin-entity-details/admin-entity-panel-component/admin-entity-panel-component.component.tssrc/app/core/admin/admin-list-manager/admin-list-manager.component.tssrc/app/features/matching-entities/admin-matching-entities/edit-matching-entity-side/edit-matching-entity-side.component.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*.component.html : Use native control flow (`if`, `for`, `switch`) instead of structural directives (`*ngIf`, `*ngFor`, `*ngSwitch`)
Applied to files:
src/app/features/dashboard-widgets/birthday-dashboard-widget/birthday-dashboard-settings.component/birthday-dashboard-settings.component.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*.component.ts : Prefer inline templates for small components in Angular
Applied to files:
src/app/features/dashboard-widgets/birthday-dashboard-widget/birthday-dashboard-settings.component/birthday-dashboard-settings.component.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*.component.{ts,html} : All user-facing strings must be translatable using Angular i18n markers or `$localize` in Aam Digital
Applied to files:
src/app/features/dashboard-widgets/birthday-dashboard-widget/birthday-dashboard-settings.component/birthday-dashboard-settings.component.tssrc/app/core/entity/default-datatype/default.datatype.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*.component.ts : Prefer Reactive Forms over Template-driven forms in Angular
Applied to files:
src/app/features/dashboard-widgets/birthday-dashboard-widget/birthday-dashboard-settings.component/birthday-dashboard-settings.component.tssrc/app/child-dev-project/notes/admin-note-details/admin-note-details.component.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*.component.ts : Prefer `input()` and `output()` functions over `Input` and `Output` decorators in Angular components
Applied to files:
src/app/features/dashboard-widgets/birthday-dashboard-widget/birthday-dashboard-settings.component/birthday-dashboard-settings.component.tssrc/app/child-dev-project/notes/admin-note-details/admin-note-details.component.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*entity*.spec.ts : Test entity operations with proper data setup/teardown in unit tests
Applied to files:
src/app/core/export/query.service.spec.tssrc/app/utils/database-testing.module.tssrc/app/core/entity/entity-mapper/entity-mapper.service.spec.tssrc/app/core/entity/default-datatype/default.datatype.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*.spec.ts : Mock dependencies properly using Angular testing utilities in unit tests
Applied to files:
src/app/core/export/query.service.spec.tssrc/app/utils/database-testing.module.tssrc/app/core/entity/entity-mapper/entity-mapper.service.spec.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to src/app/core/demo-data/**/*.ts : Provide demo data generators for new entities using `faker-js/faker` following existing demo data patterns
Applied to files:
src/app/core/export/query.service.spec.tssrc/app/utils/database-testing.module.tssrc/app/core/entity/entity-mapper/entity-mapper.service.spec.tssrc/app/core/entity/default-datatype/default.datatype.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*.spec.ts : Use established testing patterns from the Aam Digital project in unit tests
Applied to files:
src/app/core/export/query.service.spec.tssrc/app/utils/database-testing.module.tssrc/app/core/entity/entity-mapper/entity-mapper.service.spec.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*.{component,service}.spec.ts : Write unit tests for all new components and services using Jasmine/Karma
Applied to files:
src/app/core/export/query.service.spec.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to e2e/tests/**/*.ts : Use realistic user scenarios in Playwright E2E tests
Applied to files:
src/app/core/export/query.service.spec.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*.{component,directive}.ts : Implement proper permissions checking via CASL integration using `EntityAbility` and `DisableEntityOperationDirective`
Applied to files:
src/app/core/admin/admin-entity-details/admin-entity-panel-component/admin-entity-panel-component.component.tssrc/app/child-dev-project/notes/admin-note-details/admin-note-details.component.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*entity*.{service,component}.ts : Use proper generics for entity types in TypeScript
Applied to files:
src/app/core/admin/admin-entity-details/admin-entity-panel-component/admin-entity-panel-component.component.tssrc/app/child-dev-project/notes/admin-note-details/admin-note-details.component.tssrc/app/core/entity/entity-mapper/entity-mapper.service.spec.tssrc/app/core/entity/default-datatype/default.datatype.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*.component.ts : Use trackBy functions for lists in Angular templates for performance optimization
Applied to files:
src/app/core/admin/admin-list-manager/admin-list-manager.component.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/models/**/*.entity.ts : Define entity schemas through `DatabaseField()` annotations in model classes
Applied to files:
src/app/utils/database-testing.module.tssrc/app/core/entity/entity-mapper/entity-mapper.service.spec.tssrc/app/core/entity/default-datatype/default.datatype.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*.{component,service,directive,guard,interceptor,resolver,pipe}.ts : Use `inject()` function instead of constructor injection for dependencies
Applied to files:
src/app/utils/database-testing.module.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/models/**/*.entity.ts : All data models must extend the base `Entity` class in Aam Digital
Applied to files:
src/app/core/entity/entity-mapper/entity-mapper.service.spec.tssrc/app/core/entity/default-datatype/default.datatype.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to **/*datatype*.{service,component}.ts : Implement specific datatypes extending the `DefaultDatatype` class with 'edit' and 'display' components in Aam Digital
Applied to files:
src/app/core/entity/default-datatype/default.datatype.ts
📚 Learning: 2025-11-26T16:20:52.119Z
Learnt from: CR
Repo: Aam-Digital/ndb-core PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-26T16:20:52.119Z
Learning: Applies to src/**/*.{ts,js} : Use ESLint for linting (npm run lint)
Applied to files:
package.json
🧬 Code graph analysis (1)
src/app/core/export/query.service.spec.ts (1)
src/app/core/export/query.service.ts (1)
queryData(87-114)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Agent
- GitHub Check: Seer Code Review
- GitHub Check: qa / test-e2e
- GitHub Check: build-webapp
- GitHub Check: qa / test-unit
🔇 Additional comments (16)
src/app/features/matching-entities/admin-matching-entities/edit-matching-entity-side/edit-matching-entity-side.component.ts (1)
15-15: Verify CommonModule removal aligns with actual template usage.CommonModule removal from standalone components is appropriate for Angular 21. However, ensure the component template doesn't rely on CommonModule structural directives (
*ngIf,*ngFor,*ngSwitch) or pipes (DatePipe,CurrencyPipe, etc.). If using native control flow syntax (@if,@for,@switch), the removal is safe and aligns with project patterns.src/app/core/admin/admin-list-manager/admin-list-manager.component.ts (1)
10-10: CommonModule removal requires template verification.Confirm the template is compatible with CommonModule removal by verifying it does not use structural directives (
*ngIf,*ngFor,*ngSwitch, etc.) or CommonModule pipes (date,currency,slice,uppercase,lowercase,titlecase,json,keyvalue,async). Use native control flow syntax (if,for,switch) per Angular standards.src/app/child-dev-project/notes/admin-note-details/admin-note-details.component.ts (1)
2-2: CommonModule was never imported in this component; no removal occurred.The component already uses standalone syntax with the
importsarray (line 17) and never included CommonModule. The template verification confirms compatibility—no structural directives or CommonModule pipes are present. However, the component does not implement the OnPush change detection strategy recommended in the coding guidelines, nor does it use theinput()andoutput()functions instead of@Inputand@Outputdecorators.Likely an incorrect or invalid review comment.
src/app/core/admin/admin-primary-action/admin-primary-action.component.ts (1)
11-11: CommonModule removal is appropriate for Angular 21 standalone components.Removing CommonModule is correct for this standalone component. The template uses only Angular Material components, custom app components, and modern native control flow (
@if), with no dependency on CommonModule directives or pipes.src/app/features/dashboard-widgets/birthday-dashboard-widget/birthday-dashboard-settings.component/birthday-dashboard-settings.component.ts (1)
3-3: CommonModule removal is correct for this standalone component.Verified: The template uses modern control flow syntax (
@for,@if) instead of structural directives, and contains no CommonModule pipes. The removal reduces the module surface area as intended.src/app/core/admin/admin-entity-details/admin-entity-panel-component/admin-entity-panel-component.component.ts (1)
6-6: LGTM: CommonModule removal aligns with Angular 21.The removal of CommonModule from the imports is correct for Angular 21 standalone components, as common directives like
NgIf,NgFor, etc., are now automatically available without explicit imports.src/app/utils/database-testing.module.ts (2)
14-14: LGTM: RxJS import added for async config handling.
37-48: Excellent async initialization improvement.The explicit wait for
ConfigService.configUpdatesusingfirstValueFromensures configuration is fully loaded before setting up entities. This prevents race conditions in tests where Angular doesn't automatically awaitAPP_INITIALIZERproviders.src/app/core/export/query.service.spec.ts (3)
1-1: LGTM: Testing utilities imported for async handling.
403-417: Proper async test pattern for entity updates.The conversion to
fakeAsyncwith explicittick()calls correctly handles the asynchronous entity update propagation. The multipletick()calls ensure both the save operation and theentityMapper.receiveUpdatesobservable complete before assertions run.
419-435: Proper async test pattern for entity deletion.The
fakeAsyncpattern withtick()calls ensures the entity removal and update notifications complete before verifying the entity is no longer in the query results.src/app/core/entity/entity-mapper/entity-mapper.service.spec.ts (3)
19-19: LGTM: EntityConstructor type imported.
30-31: LGTM: Testing utilities imported.
188-219: Excellent test refactoring with explicit async assertions.The test now uses
TestEntityto avoid interference from existing entities andfirstValueFromto explicitly convert thereceiveUpdatesobservable to promises. This makes the test more reliable and easier to understand, with clear assertions for each CRUD operation.package.json (2)
30-82: Angular 21 versions are valid and stable; no deprecation issues detected.Verification confirms that Angular 21 (stable, released November 19, 2025) and the specified versions in package.json are legitimate and current:
- @angular/[email protected] exists and is not deprecated
- [email protected] exists and is not deprecated
- [email protected] exists and is not deprecated
All core Angular packages and related dependencies referenced in lines 30–82 are available in the npm registry with no deprecation flags.
139-144: Package overrides are appropriate for Angular 21 compatibility.The
keycloak-angular@^21.0.0package officially supports Angular 21, using matching major-versioning with Angular starting from v19. The overrides correctly ensurekeycloak-angularuses the specified Angular 21 versions (@angular/common,@angular/core,@angular/router).
| */ | ||
|
|
||
| import { $localize } from "@angular/localize/init"; | ||
| import { $localize } from "@angular/localize/init"; // import needed to make this file work in e2e test fixtures also |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's read the file to understand the context
cat -n src/app/core/entity/default-datatype/default.datatype.ts | head -70Repository: Aam-Digital/ndb-core
Length of output: 3525
🏁 Script executed:
# Search for other usages of $localize in the project
rg '\$localize' --type ts -B 2 -A 2 | head -50Repository: Aam-Digital/ndb-core
Length of output: 3889
🏁 Script executed:
# Check if there are any e2e test files or configurations
fd -e conf.js -e setup.ts -e test-setup | grep -E "(e2e|test)" | head -20Repository: Aam-Digital/ndb-core
Length of output: 46
🌐 Web query:
Angular 21 localization $localize import configuration best practices
💡 Result:
Best-practice checklist for configuring $localize in Angular 21
-
Install via the CLI (adds types and the recommended import): run ng add @angular/localize. This updates package.json and tsconfig and (optionally) inserts the import for you. [1]
-
Where to import $localize:
- For browser builds add the side-effect import once (polyfills.ts or main.ts): import '@angular/localize/init';.
- For server-side rendering add the import in main.server.ts. [1][2]
-
Choose build-time vs runtime translation:
- Default (recommended for production): merge translations at build time (Angular CLI localize/variants) so $localize is only a marker and translated strings are inlined — no runtime cost. Configure locales in angular.json and use ng build --localize / angular.json "localize" settings. [3]
- If you need runtime translation (dynamic switching, fewer build outputs), use the runtime mode: put @angular/localize in dependencies (not devDependencies) or run ng add with --use-at-runtime; load translations at runtime with loadTranslations/clearTranslations. [1][4]
-
LOCALE_ID and locale data:
- Import global locale data when needed (e.g. import '@angular/common/locales/global/fr';) or rely on CLI auto-inclusion when using --localize. Set LOCALE_ID appropriately. [2]
-
TypeScript and tooling:
- Ensure tsconfig includes types: ["@angular/localize"] (ng add does this). If you manually add imports, also list @angular/localize in package.json dependencies. [1][5]
-
Avoid pitfalls:
- Only import @angular/localize/init once per application (polyfills/main). Don’t add that import inside libraries; libraries should not force $localize on consumers.
- Prefer build-time inlining for best performance and smallest bundles unless you explicitly need runtime features. [3][4]
If you want, I can show the exact angular.json snippets and main.ts/polyfills.ts examples for both build-time and runtime setups.
Sources: Angular docs — Add the localize package [1], Import global variants / locale data [2], Merge translations / build-time localize [3], @angular/localize API & runtime functions [4], $localize migration notes [5].
Move $localize import to application bootstrap.
The import on line 18 violates Angular 21 best practices. Per official documentation, @angular/localize/init should be imported once per application in bootstrap files (polyfills.ts or main.ts), not in source files or utility classes. Importing it here forces $localize on all consumers of this base class. The comment indicates this is a workaround for e2e test configuration—the proper fix is to configure the application bootstrap to make $localize globally available instead.
🤖 Prompt for AI Agents
In @src/app/core/entity/default-datatype/default.datatype.ts at line 18, Remove
the inline import of "@angular/localize/init" from default.datatype.ts (delete
the import of $localize in
src/app/core/entity/default-datatype/default.datatype.ts) and instead add a
single top-level import of "@angular/localize/init" in your application
bootstrap (polyfills.ts or main.ts) so $localize is provided once for the whole
app; also ensure your e2e test bootstrap uses the same polyfills/main so tests
pick up the global $localize rather than importing it in the DefaultDatatype
class.
PR Checklist
Before you request a manual PR review from someone, please go through all of this list, check the points and mark them checked here.
This helps us reduce the number of review cycles and use the time of our core reviewers more effectively.
ng lint) passesng test) passes⏪ if issues are commented from testing or code review, make changes. Please then re-check every item of the checklist here again.
Remaining TODOs:
Summary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.