Skip to content

Upgrade Angular to v16 #431

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 8, 2025
Merged

Upgrade Angular to v16 #431

merged 5 commits into from
May 8, 2025

Conversation

omkar-ethz
Copy link
Member

@omkar-ethz omkar-ethz commented May 6, 2025

  1. Upgrade Angular, and Angular Material (and some other dependencies to v16. Tests pass and the UI looks like before --> Not migrated Material Legacy components to MDC components yet, will do so in separate PR as part of v17 migration.
  2. Fix appearance of toolbar (the API seems to have changed and color needs to be passed as a property rather than CSS attribute)

@omkar-ethz omkar-ethz requested a review from Copilot May 6, 2025 12:46
Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR updates the linting toolchain and upgrades Angular and Angular Material to version 16, while also fixing the toolbar appearance by updating its API usage.

  • Migrated from TSLint to ESLint following the guide.
  • Upgraded Angular and Angular Material to v16.
  • Adjusted the toolbar component to use the new API by passing the color as a property.

Reviewed Changes

Copilot reviewed 3 out of 8 changed files in this pull request and generated 1 comment.

File Description
scilog/src/app/logbook/core/navigation-guard-service.ts Removed the implementation of the CanDeactivate interface; review whether this change aligns with intended route guard behavior.
scilog/src/app/core/toolbar/toolbar.component.html Updated the toolbar component to include a color property as required by Angular Material v16.
Files not reviewed (5)
  • scilog/.eslintrc.json: Language not supported
  • scilog/angular.json: Language not supported
  • scilog/package.json: Language not supported
  • scilog/src/app/core/toolbar/toolbar.component.scss: Language not supported
  • scilog/tslint.json: Language not supported

@@ -7,7 +7,7 @@ export interface ComponentCanDeactivate {
}

@Injectable()
export class NavigationGuardService implements CanDeactivate<ComponentCanDeactivate> {
export class NavigationGuardService {
Copy link
Preview

Copilot AI May 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The removal of the 'CanDeactivate' interface implementation might bypass Angular's type safety for route guards. If the intention is to maintain the guard's contract for the router, consider re-adding 'implements CanDeactivate'.

Copilot uses AI. Check for mistakes.

@omkar-ethz omkar-ethz requested a review from minottic May 6, 2025 12:47
@minottic
Copy link
Member

minottic commented May 6, 2025

thanks! would you mind keeping the ESLINT change to another PR that we will merge before this?

has the look changed already anywhere (a part from the toolbar fix)?

@omkar-ethz omkar-ethz changed the base branch from main to eslint May 6, 2025 14:23
@omkar-ethz omkar-ethz requested a review from Copilot May 6, 2025 14:23
Copy link

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR upgrades Angular and Angular Material to v16 and adds linting while fixing the toolbar appearance by adapting to the updated API.

  • Upgraded Angular dependencies to v16.
  • Adjusted toolbar component to use the new 'color' property for .
  • Modified the NavigationGuardService, notably removing the explicit CanDeactivate implementation.

Reviewed Changes

Copilot reviewed 3 out of 5 changed files in this pull request and generated no comments.

File Description
scilog/src/app/logbook/core/navigation-guard-service.ts Removed interface implementation from NavigationGuardService which may affect Angular route guard behavior.
scilog/src/app/core/toolbar/toolbar.component.html Updated with a "color" property to meet the new API requirements.
Files not reviewed (2)
  • scilog/package.json: Language not supported
  • scilog/src/app/core/toolbar/toolbar.component.scss: Language not supported
Comments suppressed due to low confidence (1)

scilog/src/app/logbook/core/navigation-guard-service.ts:10

  • Removing the 'CanDeactivate' interface from NavigationGuardService may impact its role as an Angular route guard. Please confirm that this change is intentional and that the guard behavior is maintained with Angular v16.
export class NavigationGuardService  {

@omkar-ethz
Copy link
Member Author

thanks! would you mind keeping the ESLINT change to another PR that we will merge before this?

has the look changed already anywhere (a part from the toolbar fix)?

@minottic thank you for having a look! The look hasn't changed at all as far as I can tell.
Good point, created a separate PR for eslint: #433

Updated this PR's base branch as the eslint branch, as the ng update command updates eslint from 15 to 16 as well.

@omkar-ethz omkar-ethz changed the title Add linting and Angular upgrade to v16 Upgrade Angular to v16 May 6, 2025
Base automatically changed from eslint to main May 7, 2025 09:25
Copy link
Member

@minottic minottic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good! Is the copilot warning relevant?

@omkar-ethz
Copy link
Member Author

looks good! Is the copilot warning relevant?

It is kind of relevant -- thanks! Angular recommends moving to functional guards, so had deprecated the class based CanDeactivate interface. But in the router we were still using class based approach. Fixed this in the latest commit. Minor enough that I think i don't need to request a re-review, will merge!

@omkar-ethz omkar-ethz merged commit f559199 into main May 8, 2025
1 check passed
@omkar-ethz omkar-ethz deleted the angular-upgrade branch May 8, 2025 14:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants