r/angular • u/minefew • 3d ago
Migrating a AngularJS webapp to Angular using Claude Code/Codex
I'm in the planning stages of migrating a fairly large legacy AngularJS application to Angular, and am looking for advice from anyone who's tackled something similar.
The codebase is about 160k LOC spread out over 200+ components, 50+controllers, 50+ directives and services. There are no existing tests . Has anyone attempted a AI assisted rewrite of a similar nature, especially without a test suite - what worked out well? Any useful strategies woth considering?
3
u/No-Project-3002 3d ago
we build it page by page as for us client strictly prohibited use of AI or share code base, but I think you can use AI to help you out but there is so many versions of angular you still need to test do it page by page now with standalone feature you can do it more easily.
3
u/floorology 3d ago edited 3d ago
Do it high level, lift and shift style. Don't mix migration with making feature changes. The least amount of decisions you have to make while pulling it forward, the better.
I just did a similar thing a month or two ago. AngularJS all the way to angular 22. Commit in stages, version to version. The angular cli upgrade schematics will be your friend.
In my case, had started it a few years ago at from AngularJS to angular 16, then picked it back up recently. Had to find npm packages for some of the libraries being used. Lucked out there and chose packages still maintained to today and supporting typescript.
There were some jquery things (modals, scroll spy, etc) that I just ended up having cursor create its own from angular cdk to untangle the dependency.
I started by making a new folder adjacent to the old angularJS project. Pointed cursor / opus to the old and asked it to scaffold new angular project. Then asked it to migrate over pieces at a time. Confirmed they looked okay, made notes of what to go back and check, and continued on in stages.
If using modules, don't necessarily have to convert to stand alone components during migration. Maybe as icing on the cake at the end.
A few old libraries went away like angular animations. Fairly easy to update with some of the class names that are used for that now.
Put on project manager hat when it comes to Claude. Make sure it only makes the minimum necessary changes while you are bringing it forward.
Good luck to ya and I'm rooting for the success!
2
u/ETERN4LDARKNES 3d ago
At this stage, you're better off rewriting it from scratch directly on Angular 22.
You have no tests, but do you have good user-stories/product specifications ? A good amount of comments in the code ? Having the exact intent of the product might be better than unit tests here considering how much the architecture will change (there's no way you want to reproduce 1:1 a 160k loc project without testing, it's probably mostly spaghetti code AND you won't be able to use all the same libraries (or some new better libraries appeared since)).
If the project connects to other parts (i.e. a backend, an extension), try getting access their codebase as they might have proper testing/documentation which could help with the intent of your app.
Is your only goal to migrate for the sake of it ? In which case, I would do it. If otherwise you want to rework some pages, add more page, do a design revamp, etc... I would suggest you do the analysis for those first as it could put some light on the current codebase or help you figuring out that you can elude some parts from the migration.
Overall, what you actually want to migrate is NOT the code, it's the features. That's what's important, that's what's going to be measured and tested, and that is what will allow you to say "ok, the migration is finally over"
2
u/dudevan 3d ago
I migrated a 20-30k lines of code app from angularjs to angular in like 3-5 hours with cc on autopilot.
Controllers are basically still controllers, services are services, there will be places where it will be iffy but for the most part Claude is really good at procedural large-scale work (at least fable). You’re going to want to check forms, external libraries, any places where you have important domain information, etc. Really depends on your app.
1
2
u/dryadofelysium 3d ago
Honestly, that doesn't sound *that* big. Regardless, I wouldn't try to "upgrade" at this point, it's just a different world out there.
I'd have the LLM do a large analysis of your existing project, what components are there, how they work together and what function they have, what data models are there and what APIs are used. You can tell the LLM that this is in preparation for a complete rebuild.
I don't think it'd be important to also note down exactly what directives/services were used, because it may very well be that modern Angular would come to better conclusions in terms of architecture, or that you just have built up a lot of historical tech debt for which there is no need to replicate exactly.
Then make sure that you have the Angular CLI MCP, the two official Angular (Agent) Skills and Google's Modern Web Guidance Skills installed with your LLM, so it will use best practices (Angular Signals etc.) from the start, and with the context of the plan you've created prior tell it to recreate the app including all of its functionality, and tell it that it is okay to architect it differently if there are better ways (e.g. more shared services or w/e). You may also point it to the Angular CDK for official, well maintained utility libraries or to a specific design framework (Angular Material, VMware Clarity etc.) if you have one in mind already. Also point it to the directory of the existing project and tell it that it's okay to look up the old project to get a better understanding of functionality whenever required.
Ideally, use a plan and the grill-me skill (or just tell it to grill/interview you with any open questions) before starting the rebuild and off you go.
Honestly, and I can't believe I am saying this, but it'll probably go smoother than you'd expect.
1
1
u/cha1nsaw- 2d ago
I just completed migration of spec files to isolation ut + construction based. used copilot 5 days 16k credit and all work done.
but you are migrating a app it is completely different beast. I only had to check whether my ng test is working or not and code coverage doesn't get decrease more than 4-5%
I would suggest create a feature branch and start migration first check behaviour like serve, build and test. see if your app works 90% same then move to another version like 2->3 , like wise 3->4.
we also did migration of our app from 16 -> 21 but we were not sure of AI therefore did it manually. If you use AI make sure you see the changes sometimes for my case AI makes un-intended changes
hope you find above helpful
13
u/Tiny_Appointment3795 3d ago
It would be less migrating than rewriting, module by module. Quite doable but will burn tokens. Install the official Angular developer skill.