-
Notifications
You must be signed in to change notification settings - Fork 0
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
Upgrade: Angular 17 #116
Upgrade: Angular 17 #116
Conversation
5c087ad
to
b96c698
Compare
Angular Update Guide ChecklistChecklist from Angular to update from v15 to v17. Angular v16 Upgrade
Angular v17 Upgrade
|
Breaking Changes and Deprecation ChecksTypescript API Breaking Changes (ts 5.0 to 5.3)
TypeScript 5.4 Announcement
Angular (upgrade from 15 to 17)See previous comment following Angular Update Guide Checklist. Angular Components
Angular ESLint (upgrade from 15 to 17)
TypeScript ESLint (upgrade from 5 to 7)Need more research to check:
Angular CLI (upgrade from 15 to 17)
Angular Bootstrap by Valor Software (upgrade from 10.2.0 to 12.0.0)
ESLint (upgrade from 8.33.0 to 8.57.0)
|
|
Package | Current | Wanted | Latest | Location | Depended by |
---|---|---|---|---|---|
@types/jasmine | 4.3.6 | 4.3.6 | 5.1.4 | node_modules/@types/jasmine | custom-schematics |
@types/node | 14.18.63 | 14.18.63 | 20.14.9 | node_modules/@types/node | custom-schematics |
jasmine | 4.5.0 | 4.6.0 | 5.1.0 | node_modules/jasmine | custom-schematics |
- Angular v17 seems to use Jasmine v5.
- I'm not sure what depends on
@types/node
and I don't see it listed anywhere as a peerDependency. So it may be fine to update.
For token-atm-spa
Package | Current | Wanted | Latest | Location | Depended by |
---|---|---|---|---|---|
@types/jasmine | 4.3.6 | 4.3.6 | 5.1.4 | node_modules/@types/jasmine | dev-con-test |
@types/lodash | 4.17.5 | 4.17.6 | 4.17.6 | node_modules/@types/lodash | dev-con-test |
@types/uuid | 9.0.8 | 9.0.8 | 10.0.0 | node_modules/@types/uuid | dev-con-test |
@typescript-eslint/eslint-plugin | 7.13.1 | 7.15.0 | 7.15.0 | node_modules/@typescript-eslint/eslint-plugin | dev-con-test |
@typescript-eslint/parser | 7.13.1 | 7.15.0 | 7.15.0 | node_modules/@typescript-eslint/parser | dev-con-test |
ag-grid-angular | 30.2.1 | 30.2.1 | 32.0.0 | node_modules/ag-grid-angular | dev-con-test |
ag-grid-community | 30.2.1 | 30.2.1 | 32.0.0 | node_modules/ag-grid-community | dev-con-test |
camelcase-keys | 8.0.2 | 8.0.2 | 9.1.3 | node_modules/camelcase-keys | dev-con-test |
compress-json | 2.1.3 | 2.1.3 | 3.1.0 | node_modules/compress-json | dev-con-test |
date-fns | 2.30.0 | 2.30.0 | 3.6.0 | node_modules/date-fns | dev-con-test |
eslint | 8.57.0 | 8.57.0 | 9.6.0 | node_modules/eslint | dev-con-test |
eslint-config-prettier | 8.10.0 | 8.10.0 | 9.1.0 | node_modules/eslint-config-prettier | dev-con-test |
eslint-plugin-json | 3.1.0 | 3.1.0 | 4.0.0 | node_modules/eslint-plugin-json | dev-con-test |
eslint-plugin-markdown | 3.0.1 | 3.0.1 | 5.0.0 | node_modules/eslint-plugin-markdown | dev-con-test |
eslint-plugin-prettier | 4.2.1 | 4.2.1 | 5.1.3 | node_modules/eslint-plugin-prettier | dev-con-test |
fp-ts | 2.16.6 | 2.16.7 | 2.16.7 | node_modules/fp-ts | dev-con-test |
html-dom-parser | 3.1.7 | 3.1.7 | 5.0.8 | node_modules/html-dom-parser | dev-con-test |
husky | 8.0.3 | 8.0.3 | 9.0.11 | node_modules/husky | dev-con-test |
jasmine-core | 4.5.0 | 4.5.0 | 5.1.2 | node_modules/jasmine-core | dev-con-test |
karma-chrome-launcher | 3.1.1 | 3.1.1 | 3.2.0 | node_modules/karma-chrome-launcher | dev-con-test |
karma-jasmine-html-reporter | 2.0.0 | 2.0.0 | 2.1.0 | node_modules/karma-jasmine-html-reporter | dev-con-test |
prettier | 2.8.8 | 2.8.8 | 3.3.2 | node_modules/prettier | dev-con-test |
prettier-eslint | 15.0.1 | 15.0.1 | 16.3.0 | node_modules/prettier-eslint | dev-con-test |
uuid | 9.0.1 | 9.0.1 | 10.0.0 | node_modules/uuid | dev-con-test |
- Angular v17 seems to use Jasmine v5.
- Prettier 3.2.5 supports angular 17 specific syntax
- To support Prettier v3,
prettier-eslint
needs to be updated to v16. - Prettier v3 also seems to use TypeScript v5
prettier-eslint
uses typescript v5 from version 16.1.0 and up.
Notes
- Jasmine Upgrade to 5.0 guide
- I'm having a hard time teasing out all the ESLint and prettier versions, setup, and use information. It's not a blocker for this pull request but it may be a good idea to look into what is actually needed in future.
Thank you for checking all the packages! For this pull request my preference is to minimize changes, so I did not update any package that isn't required to be updated. Here are some thoughts about Jasmine, TypeScript, and Prettier: Angular 17 itself is using Jasmine 5 (according to the TypeScript is a bit tricker. Since it is a compile-time dependency most of the time (linter is an exception), version mismatch is not necessarily a problem. The only thing to worry about is the compatibility of exported declaration files, and that's why I override the Also, thank you for catching the Prettier issue! I misremembered it as added by Angular, but now I realize that it was manually added by us at the very beginning. Also, I will push a commit soon to update |
1. Token ATM Pages
2. Miscellaneous Components
3. Form field Components
|
Note: I had a Production build problem since I'm running a local server for Token ATM. To make it work I built Token ATM in production mode, served the website from the I believe this is the same/similar changes github actions makes when bundling and publishing the |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Brief Functionality Testing resulted in no errors. Angular 17 upgrade looks good to me.
I didn't do a thorough testing of all the guards, but I don't expect their execution changed.
Description
This pull request upgrades the Angular version used by
token-atm-spa
from 15 to 17.Breaking Changes and Deprecations Information for Project Dependencies
The following list includes links to information about breaking changes and deprecations of project dependencies that gets upgraded in this pull request:
typescript
@angular/animations
,@angular/common
,@angular/compiler
,@angular/core
,@angular/forms
,@angular/localize
,@angular/platform-browser
,@angular/platform-browser-dynamic
,@angular/router
,@angular/compiler-cli
,zone.js
@angular/cdk
,@angular/material
@angular-eslint/builder
,@angular-eslint/eslint-plugin
,@angular-eslint/eslint-plugin-template
,@angular-eslint/schematics
,@angular-eslint/template-parser
@typescript-eslint/eslint-plugin
,@typescript-eslint/parser
@angular/cli
,@angular-devkit/build-angular
ngx-bootstrap
eslint
Applied Migrations
(Ref) For TypeScript config,
importsNotUsedAsValues
is deprecated in favor ofverbatimModuleSyntax
since TypeScript 5.0. SettingverbatimModuleSyntax
totrue
enforces the use ofimport type
when only the declaration is used.tsconfig.json
,importsNotUsedAsValues: "error"
is replaced withverbatimModuleSyntax: true
.@typescript-eslint/consistent-type-imports
is added to enforce and provide auto-fix for this constraint.@Inject()
is required when injecting services from Angular DI in constructor (otherwise only type will be imported, which causes the failure of Angular DI at runtime).(Ref) In
angular.json
,browserTarget
is deprecated in favor ofbuildTarget
(automatically changed byng update
migrations).(Ref) TypeScript version upgrade results in a type check failure for
type-fest@3.1.0
, which is an dependency ofdecamelize-keys
. This issue is resolved in newer versions oftype-fest
. Therefore, thetype-fest
version used bydecamelize-keys
is overridden inpackage.json
.Dependencies of
custom-schematics
have their versions bumped accordingly.Angular Material version upgrade causes the following CSS rule being emitted, which results in the changing of warning style for single-selection fields and multi-selection fields:
styles.sass
is modified to unset this emitted CSS rule. This modification is necessary as the warning style for single-selection fields and multi-selection fields was implemented by manually overriding emitted CSS styles (it fails to be implemented by configuring themes for Angular Material). Achieving the same style by configuring Angular Material theme should be re-attempted later on for the upgraded Angular Material.Testing Note
Please test if Token ATM still functions as expected after this Angular major version upgrade. Here are some recommendations for testing:
Go through links included in the Breaking Changes and Deprecations Information for Project Dependencies section above and verify if any migrations other than those mentioned in the Applied Migrations section is necessary.
Check Angular Update Guide, which provides an interactive checklist for migrations of Angular and Angular Material between major versions.
Perform brief functionality testing for Token ATM.
main
branch. It will be fixed in another pull request. Please ignore this feature when performing testing.