Upgrade to Angular 20 from Angular 13 - Part 3: Angular 16 with Claude Code

The task of upgrading Jira Clone to Angular 20 has been sitting on my backlog forever. If you have been following this series, you know the drill. In Part 1 we went from Angular 13 to 14, and in Part 2 we tackled Angular 14 to 15. Each time, the process was mostly the same: run ng update, hit dependency conflicts, resolve them one by one, test, and commit.

It is usually tedious to do those migrations manually. But this time, I tried something different. I used Claude Code to do the whole thing.

The idea

I had two detailed blog posts from the previous migrations (Part 1 and Part 2) that documented every step, every error, and every resolution. That is a lot of context. So I thought, what if I just ask Claude to read those posts, understand the pattern, and generate a plan for the Angular 16 upgrade?

I used the superpower workflow to generate a detailed implementation plan.

Claude read through both previous posts, understood the proven pattern (upgrade Angular core first with --force, then resolve each dependency conflict one at a time), and produced a comprehensive 14-task plan.

After just a few minutes, the plan was ready. I read through all of it. Looked good.

The plan

Here is a summary of the steps Claude generated:

1. Create a new branch trung/v20-migration-part-3
2. Run ng update for Angular 16 with --force (same ESLint chicken-and-egg problem as before)
3. Upgrade TypeScript from ~4.8.4 to ~5.0.4 (Angular 16 requires TS 5.0+)
4. Upgrade zone.js from ~0.11.4 to ~0.13.0 (significant jump)
5. Upgrade @angular-builders/custom-webpack to 16.0.0
6. Upgrade @angular-eslint/* to 16.3.1
7. Upgrade @angular/cdk to 16.2.14
8. Upgrade Ant Design packages (ng-zorro-antd to 16.2.2, @ant-design/icons-angular to 16.0.0)
9. Upgrade ngx-quill from 16.1.2 to 22.1.1 (this was the biggest risk, major version jump)
10. Upgrade @ngneat/content-loader to 7.0.0
11. Verify clean npm install
12. Verify ng serve
13. Verify ng build
14. Push and create PR

Claude also identified the key changes in Angular 16 (Signals in developer preview, TypeScript 5.0 support, zone.js bump) and listed potential gotchas, including the ngx-quill major version jump from 16 to 22 since ngx-quill uses its own versioning that does not follow Angular’s.

The full plan is available in the repo.

Kicking off the process

Once I reviewed the plan, I kicked off the execution. Claude worked through each task sequentially, following the exact same pattern we established in Parts 1 and 2:

1. Update the version in package.json
2. Run npm install --force (since not all dependencies are resolved yet)
3. Verify with npm view <package>@<version> peerDependencies --json
4. Commit the changes
5. Move to the next dependency

The whole process ran for about 20 minutes. I mostly just watched and approved the commands. There was one moment where Claude needed to resolve an unexpected issue with ngx-quill’s API changes, but it handled that by searching the codebase for quill usage and checking compatibility.

The result

After all 14 tasks completed, I ran npm start and things worked as expected. The application compiled and served without errors. Board view, issue detail, drag and drop, everything functioned correctly.

Here is the dependency version map for reference:

No code changes were needed beyond the dependency upgrades. Angular 16 introduces Signals in developer preview, but there is no migration needed yet. Standalone components and control flow syntax migration are deferred to the Angular 17 step.

Source code

https://github.com/trungvose/jira-clone-angular/pull/109

What I learned

Doing the first two migrations manually and documenting them thoroughly turned out to be the best investment. Those blog posts became the training data for Claude to understand the exact pattern and replicate it. The third migration took about 30 minutes total: 10 minutes of prompting and reviewing the plan, then a single execution run by Claude. What used to be an hour of hands-on work became mostly watching and approving.

The key is that the pattern was well-established:

• Use --force for the initial ng update to bypass the ESLint peer dependency conflict
• Resolve each dependency conflict one at a time using npm view to check versions and peer dependencies
• Commit after each successful step so you can always roll back
• Test with both ng serve and ng build since production builds are stricter

If you have repetitive tasks with a clear pattern, documenting the first few iterations thoroughly and then handing it off to AI is a solid approach.

What is next

We are at Angular 16 now. The remaining path is 16 -> 17 -> 18 -> 19 -> 20. Angular 17 is going to be the interesting one since that is where standalone components and the new control flow syntax (@if, @for, @switch) become the default. That will require actual code changes, not just dependency bumps.

See you in Part 4.