Upgrade Angular 15→16 (#25)#91
Open
weilixiong wants to merge 2 commits into
Open
Conversation
ng5-slider is abandoned and unsupported on Angular 16+. Upgrade to the maintained fork with identical API. Closes BAWES-Universe#33 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
📝 WalkthroughWalkthroughAngular framework upgraded from 15 to 16, TypeScript to 5.1.6, and zone.js to 0.13.3. The deprecated ng5-slider package removed; ChangesAngular 16 Migration with Slider Package Update
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related issues
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@package.json`:
- Around line 69-77: The `@angular-eslint` packages in package.json are still at
major version 14 while Angular CLI/compiler are at 16; update the
`@angular-eslint` packages (`@angular-eslint/builder`,
`@angular-eslint/eslint-plugin`, `@angular-eslint/eslint-plugin-template`,
`@angular-eslint/template-parser`) to the matching Angular 16 major (e.g. ^16.0.0
or the latest 16.x compatible release) so ESLint tooling aligns with
`@angular/cli` and `@angular/compiler` versions, then run npm install and verify ng
lint works.
In
`@src/app/components/date-range-refinement-list/date-range-refinement-list.component.ts`:
- Line 7: The project is using `@angular-slider/ngx-slider` v15 which is
incompatible with Angular 16; update the dependency in package.json to
"`@angular-slider/ngx-slider`": "^16.0.0", run your package manager install to
update the lockfile, and rebuild; then verify the import statement that
references Options in date-range-refinement-list.component.ts (import { Options
} from "`@angular-slider/ngx-slider`") still matches the v16 API and adjust any
Option property usages or names if the v16 API changed.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 178becd0-d7da-49f0-9ab6-0429e91b9945
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (8)
package.jsonsrc/app/components/age-refinement-list/age-refinement-list.component.htmlsrc/app/components/age-refinement-list/age-refinement-list.component.tssrc/app/components/age-refinement-list/age-refinement-list.module.tssrc/app/components/date-range-refinement-list/date-range-refinement-list.component.tssrc/app/components/range-refinement-list/range-refinement-list.htmlsrc/app/components/range-refinement-list/range-refinement-list.module.tssrc/app/components/range-refinement-list/range-refinement-list.ts
Comment on lines
+69
to
+77
| "@angular-devkit/build-angular": "^16.2.16", | ||
| "@angular-eslint/builder": "^14.0.0", | ||
| "@angular-eslint/eslint-plugin": "^14.0.0", | ||
| "@angular-eslint/eslint-plugin-template": "^14.0.0", | ||
| "@angular-eslint/template-parser": "^14.0.0", | ||
| "@angular/cli": "^15.0.4", | ||
| "@angular/compiler": "^15.0.0", | ||
| "@angular/compiler-cli": "^15.0.0", | ||
| "@angular/language-service": "^15.0.0", | ||
| "@angular/cli": "^16.2.16", | ||
| "@angular/compiler": "^16.2.12", | ||
| "@angular/compiler-cli": "^16.2.12", | ||
| "@angular/language-service": "^16.2.12", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Current relevant devDependencies:"
node -e 'const d=require("./package.json").devDependencies; for (const k of ["`@angular/cli`","`@angular-eslint/builder`","`@angular-eslint/eslint-plugin`","`@angular-eslint/eslint-plugin-template`","`@angular-eslint/template-parser`"]) console.log(`${k}: ${d[k]}`)'
echo
echo "Peer dependencies for angular-eslint builder major 14:"
npm view `@angular-eslint/builder`@^14 peerDependencies --json
echo
echo "Peer dependencies for angular-eslint builder major 16:"
npm view `@angular-eslint/builder`@^16 peerDependencies --jsonRepository: BAWES-Universe/studenthub-staff
Length of output: 1851
🌐 Web query:
angular-eslint 14 compatibility with Angular CLI 16
💡 Result:
The angular-eslint package version 14 is not compatible with Angular CLI 16 [1][2]. Since version 12, the angular-eslint project has aligned its major version numbers with the Angular and Angular CLI major versions [2]. To ensure compatibility, you must use the angular-eslint version that matches the major version of your Angular CLI [2][3]. For an Angular CLI 16 project, you should use angular-eslint version 16 [1]. Using mismatched versions will typically result in peer dependency errors during installation [4][1]. To update your project correctly, it is recommended to use the Angular CLI update command, which helps manage these dependencies automatically [5][4]: ng update @angular/core@16 @angular/cli@16 @angular-eslint/schematics@16
Citations:
- 1: What's version of "@angular-eslint/schematics" is compatible with angular 16? angular-eslint/angular-eslint#1693
- 2: https://github.com/angular-eslint/angular-eslint
- 3: https://stackoverflow.com/questions/72995107/how-do-i-install-the-right-version-of-angular-eslint-schematic-to-match-my-angu
- 4: https://stackoverflow.com/questions/75307003/getting-error-in-angular-eslint-when-i-upgrade-angular-from-13-to-14
- 5: https://github.com/angular-eslint/angular-eslint/releases/tag/v14.0.0
🏁 Script executed:
#!/bin/bash
# Check if there's evidence of incompatibility in the codebase or common issues
# Search for any angular-eslint or ESLint configuration that might fail with version mismatch
rg -t json -i "angular-eslint|`@angular/cli`" package.json | head -20
rg "eslintConfig|angular-eslint" --type js --type ts --max-count=5Repository: BAWES-Universe/studenthub-staff
Length of output: 304
Upgrade @angular-eslint/* to match Angular 16 major version.
Lines 70-73 specify @angular-eslint/* at ^14.0.0 while line 74 upgrades @angular/cli to 16.2.16. Since Angular-eslint v12, the project aligns major versions with Angular CLI. This mismatch will cause ng lint and related ESLint tooling to fail in runtime, even if npm install succeeds.
♻️ Suggested update
- "`@angular-eslint/builder`": "^14.0.0",
- "`@angular-eslint/eslint-plugin`": "^14.0.0",
- "`@angular-eslint/eslint-plugin-template`": "^14.0.0",
- "`@angular-eslint/template-parser`": "^14.0.0",
+ "`@angular-eslint/builder`": "^16.0.0",
+ "`@angular-eslint/eslint-plugin`": "^16.0.0",
+ "`@angular-eslint/eslint-plugin-template`": "^16.0.0",
+ "`@angular-eslint/template-parser`": "^16.0.0",📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| "@angular-devkit/build-angular": "^16.2.16", | |
| "@angular-eslint/builder": "^14.0.0", | |
| "@angular-eslint/eslint-plugin": "^14.0.0", | |
| "@angular-eslint/eslint-plugin-template": "^14.0.0", | |
| "@angular-eslint/template-parser": "^14.0.0", | |
| "@angular/cli": "^15.0.4", | |
| "@angular/compiler": "^15.0.0", | |
| "@angular/compiler-cli": "^15.0.0", | |
| "@angular/language-service": "^15.0.0", | |
| "@angular/cli": "^16.2.16", | |
| "@angular/compiler": "^16.2.12", | |
| "@angular/compiler-cli": "^16.2.12", | |
| "@angular/language-service": "^16.2.12", | |
| "`@angular-devkit/build-angular`": "^16.2.16", | |
| "`@angular-eslint/builder`": "^16.0.0", | |
| "`@angular-eslint/eslint-plugin`": "^16.0.0", | |
| "`@angular-eslint/eslint-plugin-template`": "^16.0.0", | |
| "`@angular-eslint/template-parser`": "^16.0.0", | |
| "`@angular/cli`": "^16.2.16", | |
| "`@angular/compiler`": "^16.2.12", | |
| "`@angular/compiler-cli`": "^16.2.12", | |
| "`@angular/language-service`": "^16.2.12", |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@package.json` around lines 69 - 77, The `@angular-eslint` packages in
package.json are still at major version 14 while Angular CLI/compiler are at 16;
update the `@angular-eslint` packages (`@angular-eslint/builder`,
`@angular-eslint/eslint-plugin`, `@angular-eslint/eslint-plugin-template`,
`@angular-eslint/template-parser`) to the matching Angular 16 major (e.g. ^16.0.0
or the latest 16.x compatible release) so ESLint tooling aligns with
`@angular/cli` and `@angular/compiler` versions, then run npm install and verify ng
lint works.
- Update Angular core packages from 15.0.0 → 16.2.12 - Update TypeScript from 4.8.4 → 5.1.6 - Update zone.js from 0.11.8 → 0.13.3 - Replace ng5-slider with @angular-slider/ngx-slider@16.0.1 - Upgrade @ckeditor/ckeditor5-angular from 4.0.0 → 6.0.0 - Upgrade @ckeditor/ckeditor5-build-classic from 35.4.0 → 40.0.0 - Remove BrowserTransferStateModule (deprecated in Angular 16) - Remove entryComponents from NgModule decorators - Add skipLibCheck to tsconfig for ion2-calendar compatibility - Fix CKEditor import style (namespace → default import) - Fix CKEditor ViewChild type annotations - JIT development build verified: ng build --configuration=development --aot=false ✓ - Note: Production AOT build blocked by angular-instantsearch (View Engine library, no Angular 16 compatible version)
weilixiong
force-pushed
the
feat/upgrade-angular-16
branch
from
b90eb4f to
856e147
Compare
weilixiong
changed the title
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
1 participant
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.
Angular 15 → 16 升级
已完成
ng build --configuration=development --aot=false✅未完成 (需要 #26)
angular-instantsearch阻塞验证方法