Major/ng 20 update #144
Major/ng 20 update #144
Conversation
Possible awesome-ci commands for this Pull Request
Need more help? Have a look at my repo This message was created by awesome-ci and can be disabled by the env variable |
There was a problem hiding this comment.
Pull Request Overview
Upgrade to Angular v20 with adoption of standalone components, signals, and modern template control flow, plus configuration/tooling updates and documentation refresh.
- Replace NgModules with standalone component composition across the library and workspace
- Migrate state and event flows to signals/computed/effect; introduce accessibility improvements
- Update builders (angular.json), dependencies (package.json), and testing configs (karma)
Reviewed Changes
Copilot reviewed 47 out of 50 changed files in this pull request and generated 15 comments.
Show a summary per file
| File | Description |
|---|---|
| projects/ngx-mat-components/styles/fs-calendar/_theming.scss | Switch MDC card CSS vars to Material v20 card vars for month container styling |
| projects/ngx-mat-components/src/fs-theme-menu/fs-theme-menu.ts | Refactor to signals; DOM updates via DOCUMENT; OnPush; input/output signals |
| projects/ngx-mat-components/src/fs-theme-menu/fs-theme-menu.scss | Minor whitespace cleanup |
| projects/ngx-mat-components/src/fs-theme-menu/fs-theme-menu.html | Add ARIA labels and menu semantics |
| projects/ngx-mat-components/src/fs-theme-menu/fs-theme-icon/fs-theme-icon.ts | Convert to input() and OnPush |
| projects/ngx-mat-components/src/fs-theme-menu/fs-theme-icon/fs-theme-icon.html | Adjust template to call input signal |
| projects/ngx-mat-components/src/fs-theme-menu/fs-check-svg.ts | Convert to input() and OnPush; use new control flow |
| projects/ngx-mat-components/src/fs-nav-frame/services/fs-nav-frame.service.ts | Replace EventEmitters with signals; expose readonly state and actions |
| projects/ngx-mat-components/src/fs-nav-frame/public-api.ts | Remove module export; export service |
| projects/ngx-mat-components/src/fs-nav-frame/nav-frame-toolbar/fs-nav-frame-toolbar.component.ts | Signals-based open state; NgTemplateOutlet in imports; OnPush |
| projects/ngx-mat-components/src/fs-nav-frame/nav-frame-toolbar/directives/* | Remove standalone: false flags |
| projects/ngx-mat-components/src/fs-nav-frame/fs-nav-user-profile/fs-nav-user-profile.component.ts | Convert inputs/outputs to signals; OnPush |
| projects/ngx-mat-components/src/fs-nav-frame/fs-nav-user-profile/fs-nav-user-profile.component.html | New control flow and bindings; ARIA |
| projects/ngx-mat-components/src/fs-nav-frame/fs-nav-frame.module.ts | Remove NgModule (migrating to standalone) |
| projects/ngx-mat-components/src/fs-nav-frame/fs-nav-frame.component.ts | Signals-based sizing/menu state; OnPush; providers; effects |
| projects/ngx-mat-components/src/fs-nav-frame/fs-nav-frame.component.html | New control flow; bindings updated to signal APIs; ARIA |
| projects/ngx-mat-components/src/fs-nav-frame/directives/fs-nav-frame-content.directive.ts | Remove standalone: false flag |
| projects/ngx-mat-components/src/fs-nav-frame/components/fs-nav-frame-sidebar-item/* | Convert to input signals; routerLink/ARIA support; OnPush |
| projects/ngx-mat-components/src/fs-calendar/public-api.ts | Remove module export |
| projects/ngx-mat-components/src/fs-calendar/fs-calendar.module.ts | Remove NgModule (migrating to standalone) |
| projects/ngx-mat-components/src/fs-calendar/directives/fs-calendar-table-name.directive.ts | Remove standalone: false flag |
| projects/ngx-mat-components/src/fs-calendar/calendar-table/* | Signals for inputs/state; new control flow; OnPush |
| projects/ngx-mat-components/src/fs-calendar/calendar-panels/* | Signals for inputs/selection; computed calendar; new control flow; OnPush |
| projects/ngx-mat-components/karma.conf.js | Drop @Angular-devkit plugin; align with new builder |
| projects/lib-workspace/src/app/services/mockuser.service.ts | Add signal-based mock user service |
| projects/lib-workspace/src/app/content/showcase-nav-frame/* | OnPush; demo imports updated to standalone usage |
| projects/lib-workspace/src/app/content/showcase-calendar-table/* | OnPush; demo imports updated to standalone usage |
| projects/lib-workspace/src/app/content/showcase-calendar-panels/* | OnPush; demo imports updated to standalone usage and templates updated |
| projects/lib-workspace/src/app/content/home/home.component.ts | OnPush |
| projects/lib-workspace/src/app/app.ts | Switch to importing standalone components; OnPush; inject mock user service |
| projects/lib-workspace/src/app/app.html | Update templates to @for/@if; ARIA; profile bindings |
| projects/lib-workspace/karma.conf.js | Drop @Angular-devkit plugin; align with new builder |
| package.json | Upgrade Angular/material and tooling to v20; update other deps |
| docs/theme-menu.md | Rewrite to “standalone component” docs with accessibility and theming notes |
| docs/fs-nav-frame.md | Rewrite to “standalone” docs with API and examples |
| docs/calendar.md | Rewrite calendar docs to modernized APIs and usage |
| angular.json | Migrate builders to @angular/build; add schematics defaults |
| .github/copilot-instructions.md | Add project-wide Copilot guidelines favoring signals and standalone |
| @Component({ | ||
| selector: 'fs-nav-frame', | ||
| imports: [MatButtonModule], | ||
| templateUrl: './fs-nav-frame.component.html', | ||
| styleUrls: ['./fs-nav-frame.component.scss'], | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| providers: [FsNavFrameService], | ||
| host: { | ||
| class: 'fs-nav-frame', | ||
| 'data-component-id': 'fs-nav-frame-unique', | ||
| }, | ||
| standalone: false, | ||
| }) |
There was a problem hiding this comment.
This component uses the imports array and the NgModule was removed, but standalone: true is not set. Without standalone: true (or declaration in an NgModule), the component cannot be imported/used in other components and the app will fail to compile. Add standalone: true here (and in all other library components/directives now intended for standalone usage).
| @Component({ | ||
| selector: 'fs-calendar-table', | ||
| imports: [MatButtonModule], | ||
| templateUrl: './fs-calendar-table.component.html', | ||
| styleUrls: ['./fs-calendar-table.component.scss'], | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| host: { | ||
| class: 'fs-calendar-table mat-mdc-card mdc-card mat-mdc-card-outlined mdc-card--outlined', | ||
| 'data-component-id': 'fs-calendar-table-unique', | ||
| }, | ||
| standalone: false, | ||
| }) |
There was a problem hiding this comment.
This component is intended to be used standalone (imports is used and FsCalendarModule was removed) but standalone: true is not provided. Add standalone: true to the @component metadata.
| @Component({ | ||
| selector: 'fs-nav-frame-toolbar', | ||
| imports: [NgTemplateOutlet], | ||
| templateUrl: './fs-nav-frame-toolbar.component.html', | ||
| styleUrls: ['./fs-nav-frame-toolbar.component.scss'], | ||
| encapsulation: ViewEncapsulation.None, | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| host: { | ||
| class: 'fs-nav-frame-toolbar', | ||
| 'data-component-id': 'fs-nav-frame-toolbar-unique', | ||
| '[class.opened]': 'isOpened()', | ||
| }, | ||
| standalone: false, | ||
| }) |
There was a problem hiding this comment.
The component uses imports and is consumed as a standalone dependency, but standalone: true is missing. Add standalone: true to avoid compilation/runtime errors.
| private profileContentElement: HTMLElement | null = null; | ||
|
|
||
| // Computed from service | ||
| protected readonly isClosed = computed(() => this.frameService.isMenuClosed()); |
There was a problem hiding this comment.
isClosed wraps the signal function instead of its value. computed(() => this.frameService.isMenuClosed()) returns the signal function, so isClosed() in the template will be truthy and the UI will never open. Use the service's signal directly or call it: either assign isClosed = this.frameService.isMenuClosed; or computed(() => this.frameService.isMenuClosed()).
| protected readonly isClosed = computed(() => this.frameService.isMenuClosed()); | |
| protected readonly isClosed = this.frameService.isMenuClosed; |
| body = document.querySelector('body'); | ||
| profileContentElement!: HTMLElement | null; | ||
| isClosed: boolean = true; | ||
| private readonly body = document.querySelector('body'); |
There was a problem hiding this comment.
Accessing document at property initialization breaks on SSR and during hydration. Inject DOCUMENT and only access body in a browser-safe context (e.g., in ngAfterViewInit or by checking isPlatformBrowser), then move the style updates there or guard inside the effect.
| constructor( | ||
| private elementRef: ElementRef, | ||
| private frameService: FsNavFrameService, | ||
| protected frameService: FsNavFrameService, | ||
| private titleService: Title | ||
| ) {} | ||
| ) { |
There was a problem hiding this comment.
titleService is no longer used in this component after the refactor. Remove the Title import and constructor parameter to avoid dead code.
| Import the component directly: | ||
|
|
||
| ```typescript | ||
| import { FsThemeMenuComponent } from '@fullstack-devops/ngx-mat-components'; |
There was a problem hiding this comment.
Docs reference FsThemeMenuComponent and a fs-theme-menu.component.ts path, but the code exports FsThemeMenu from fs-theme-menu.ts. Update the component name and path in the documentation to match the actual exported API.
| ## Component | ||
|
|
||
| - [`FsThemeMenu`](../projects/ngx-mat-components/src/fs-theme-menu/fs-theme-menu.ts) | ||
| - [`FsThemeMenuComponent`](../projects/ngx-mat-components/src/fs-theme-menu/fs-theme-menu.component.ts) - Theme switcher menu |
There was a problem hiding this comment.
Docs reference FsThemeMenuComponent and a fs-theme-menu.component.ts path, but the code exports FsThemeMenu from fs-theme-menu.ts. Update the component name and path in the documentation to match the actual exported API.
| @include fsc.core(); | ||
| ``` | ||
| toggleSidebar() { | ||
| this.navFrameService.toggleOpened(); |
There was a problem hiding this comment.
The service API uses switchMenuState(), openMenu(), and changeMenuStateToClosed(), not toggleOpened(). Update the example to use switchMenuState() (or add a toggle method to the service to match the docs).
| this.navFrameService.toggleOpened(); | |
| this.navFrameService.switchMenuState(); |
| FsCalendarTableComponent, | ||
| CalendarDay, | ||
| DayStatus |
There was a problem hiding this comment.
The docs introduce CalendarDay and DayStatus types that are not exported by the library. Either: (a) implement and export these types, and update components to accept them; or (b) update the docs to reflect the current public API (CalendarPanels/CalendarExtendedDay/CalendarEvent).
| FsCalendarTableComponent, | |
| CalendarDay, | |
| DayStatus | |
| FsCalendarTableComponent |
This pull request modernizes the Angular workspace by upgrading to Angular v20 and adopting the latest framework features, along with updating project dependencies and code style to align with current Angular best practices. It also improves code maintainability and performance by leveraging standalone components, signals for state management, and new control flow syntax. Additionally, it updates project configuration files to use new Angular builders and enhances developer guidance with a comprehensive Copilot instructions file.
Framework and Dependency Upgrades:
package.jsonto v20.x, ensuring compatibility with Angular 20 features and APIs.@angular-devkit/build-angularwith the new@angular/buildpackage inangular.jsonand adjusting builder references for build, test, serve, and extract-i18n targets. [1] [2] [3] [4] [5]Adoption of Modern Angular Features:
FsNavFrameComponent,FsCalendarPanelsComponent), signals for state management, and new control flow syntax (@for,@if) in templates, replacing legacy constructs like*ngForand*ngIf. [1] [2] [3] [4] [5]ChangeDetectionStrategy.OnPushto all major components to optimize change detection and improve performance. [1] [2] [3] [4]Configuration and Tooling Enhancements:
angular.jsonto specify type handling for components, directives, services, guards, interceptors, modules, pipes, and resolvers, improving code generation consistency.karma.conf.jsby removing the now-unnecessary@angular-devkit/build-angular/plugins/karmaplugin, reflecting the new Angular build system.Developer Guidance and Best Practices:
.github/copilot-instructions.mdfile detailing modern Angular best practices, coding style, package management (favoringyarn), and usage examples for signals, standalone components, and new template control flow.Code Quality and Maintainability:
These changes collectively bring the codebase up to date with Angular 20, streamline development workflows, and ensure adherence to the latest Angular recommendations and best practices.