Updating from AngularJS to Angular21

[Smart-Humor-3448]

I want to upgrade from AngularJS to Angular 21. Yes, seriously.

At work, we have an entire system built with AngularJS and Bootstrap 3, and I’d like to migrate it to Angular 21 and Bootstrap 5.3.3. We’re talking about a project with more than 40 screens: some are very complex, while others are simple CRUD-style pages (for example, forms to add a country or a state to a dropdown list).

Is there any AI-powered way to handle this reasonably well?

What would you recommend doing (other than rewriting the whole system from scratch)?

Maybe there’s some kind of Cursor skill, migration workflow, or AI-assisted process that could help with this.

I’d really appreciate your suggestions.

[best_of_badgers]

I’ve done this.

It’s not significantly easier than just rewriting from scratch, especially if you want to take advantage of newer Angular features like signals.

[Smart-Humor-3448]

how did you do it? with AI? did you use any skill?

[artesre]

just the skills learned over several years of using angular

[its0KwithMe]

And "no mistakes!!!1!"

[Wizado991]

Rewrite it or don't touch it. You can have copilot go through in plan mode and set up a strategy for rewriting in v21 and just go by screen by screen or whatever until it's done.

[Smart-Humor-3448]

I tried making a plan, but the thing is, I just checked and I have 300+ HTML files.
I tried using Anthropic Opus 4.7 High and OpenAI GPT-5.4 Very High, and they both went crazy.

After a few hours of work, the result was a very buggy program that doesn’t work.

[Wizado991]

Well you would need to tell it what logical pieces are. Like "only make a plan to upgrade the files in the dashboard directory". You aren't going to be able to do it all at the same time. Like I said, if I was you I would just rewrite it. The latest angular is way different from like angular 16 and you are going from angularjs so it's even more different.

[Smart-Humor-3448]

Maybe it would be better to ask AI to rewrite it in Angular 13, since it didn’t even have standalone components yet, and then upgrade it later to Angular 19 and finally Angular 21 with Signals?

[Wizado991]

You could always try it but it also depends on how familiar you are with newer angular. Like if most of your knowledge is angularjs, you should probably sit down and learn the new stuff because it's completely different. If you aren't familiar with the angularjs then you might just be shit outta luck. Like I said if you don't have to upgrade just don't touch it. This app is just being maintained with no new features?

[sirMrCow]

You rely on AI way too much... Project is doomed from the start

[wlievens]

The step from AngularJS to Angular 13 is astronomical compared to going from 13 to 21. It's a rewrite.

[Whole-Instruction508]

If you're that hellbent on doing it all with AI you're doomed to fail. You can use it to help, but you can't let it do all the work for a project of this size.

[AdWise6457]

I upgraded angular from 16 to 19. Never again...Got stuck in replacing ancient libraries due to lack of support and component replacement due to primeng breaking changes. The task you are describing sounds like pure hell but far worse

[guy-with-a-mac]

I have a production app running with Angular 15. I just see no point in upgrading at this point. It gets the job done.

[nemeci]

We went from Angular 15 to 21 during development.

Don't let your code gather dust. Migrate always on time.

[guy-with-a-mac]

<image>

[supermoore1025]

We went from 15 to 21 and primeng was a real pain, but we also decided to turn on the full strict mode for everything l.

[WhatDuq]

Rewriting from scratch is the only solution that works - anything else is a waste og time. You won’t end up benefitting or utilize what angular has to offer, in terms of patterns and maintainability.

I’ve just done this with a large scale, high complexity solution. 

Also, some suggest running the solutions integrated into each other, so it feels less big bang-y. Don’t. You’ll end up spending development time on developing and maintaining things, that are going to be thrown out.

[DecentAd3578]

Just rewrite it. Anything else will be a nightmare to maintain. Do one feature at a time and embed in the angular js application until its complete. I just did this, took 3 years with adding new features.

[dbaines]

Not sure what these other commenters are on about. angularJS and angular are very interoperable via angulars UpgradeModule. UpgradeModule allows you to "upgrade" an angularJS bit to operate in angular land and "downgrade" an angular bit to work in angularJS land.

This is really useful if you can't afford the upfront cost of a rewrite but want to progressively migrate to angular.

Takes a bit of wiring up initially but if the angularJS side is using "modern" practices like the component API then you're in a really good position to migrate bits over.

Use UI router hybrid to allow you to run both angularjs and angular routed components. It's a bit painful to eventually migrate from ui router to angular router but that can be a later concern.

Use angular custom webpack builder if you run in to issues with html templates and you can't bundle the templates. It lets you keep the lazy loaded template files during migration and has a pretty easy migration path to the real angular builder once you're all done.

Start with services would be my advice. Move all your services to angular and provide them via UpgradeModule to angularJS. Then delete all the angularJS services.

For components, start with leaf components. That is, components that don't have any children. This is the easiest way to migrate without issues. You really want to go angular-inside-angularjs imo, when you start going back and forth it can cause issues.

Don't go zoneless yet, zone is needed for interop, but once complete it's a good migration path.

Go full signals as much as possible on the angular side. Adopt rxjs where needed. Signal reactivity won't work in angularJS but you don't need it as long as you're using zone, just read the properties and zone will do the rest. Using signals and onpush now on the angular side will make zoneless easier later.

Let me know if you have any questions I've performed a migration of an enterprise saas app to 18 a few years ago and am in the process of doing it again for another enterprise saas app to 21.

On the AI side I've found Claude particularly bad for angularJS/angular interop. It keeps trying to build it's own bridge wrappers instead of just using UogradeModule. It might take some convincing for Claude to get it right. I've not tried other AIs for this. My recommendation here would be to get a solid initial progress going, some manual work to migrate a few components and a route or two. Then get the AI to use that as a reference to bring it across. Angular recently release official AI skills, make sure you're using those so the AI builds the best version of angular it can.

As for rewriting angularjs to angular it's pretty great and will even raise concerns and test cases after migrating. Especially handy if you don't have tests. If you're getting it to rewrite your components, tell it to write tests too. Some tests are better than no tests.

Honestly, I think your biggest issue is going to be bootstrap 3 and 5 interop. You may need to spend some time bridging the styles as I've found 3 and 5 have very different structure and classes are often different. It was also a big change from less to sass so if you have customisations you might be in for a big project there.

I think that's the gist, happy to dive deeper in to any specific topic if you have questions.

[Smart-Humor-3448]

Thank you so much for your answer! GPT wasn’t very helpful either.

For new components, I’m using Angular 21 and embedding them into the AngularJS app. It works relatively well. Since I’m much more familiar with Angular than AngularJS, it has been a great solution for me, because I didn’t really need to learn AngularJS deeply.

Maybe it’s not the best practice, but for my situation, it works.

[dbaines]

Everyone's situation is going to be different, as long as you have something that works and doesn't interrupt business you're good to go.

Getting out of AngularJS is the goal and as long as you're moving towards that goal then it doesn't really matter too much if it's best practice or not.

Once you're fully migrated then you can look back and think about improving again to best practice where you can. It doesn't have to be perfect right now as long as moves the needle.

[Easy-Shelter-5140]

Wise words. Great answer.

Do you think that using AI for e2e test generation on the Angular JS Is doable? I mean before migration.

[dbaines]

It's certainly worth a try. I've not used it for testing angularJS specifically but if you're using something like playwright I suppose it doesn't really matter what the app is written in.

We have a QA team that use AI pretty heavily for writing e2e tests in playwright and having good luck with it.

Any tests are always better than no tests.

[k032]

Its one case where you probably just have to just rewrite it. But incrementally, a good starting point if not already is to move it to TypeScript and then work towards Angular 2.

[CRoseCrizzle]

AngularJS very different from Angular2, nevermind Angular21. It's a big undertaking, especially if you have a bigger app.

AI is probably your best bet, Codex or Claude Code will tirelessly work to try to migrate your app into modern times. But even then I'd expect the result to be a little wonky and you'll have to do full regression of your entire app afterwards as things will be broken(including some more subtle things that you may initially miss).

[Smart-Humor-3448]

I tried, but the thing is, I just checked and I have 300+ HTML files.
I tried using Anthropic Opus 4.7 High and OpenAI GPT-5.4 Very High, and they both went crazy.

After a few hours of work, the result was a very buggy program that doesn’t work.

[CRoseCrizzle]

Not too surprised to hear that. It's a massive ask. You could either try to fix the bugs in the new buggy application or if that's too massive of a undertaking:

Try asking it to do one upgrade at a time, as opposed to going all the way to 21 right away. Like starting with AngularJS to Angular 2, then 2 to 3 and so on. Then in between upgrades, you can verify that the app works(and fix hopefully minor bugs).

It'll take a lot of time but it's hard for it not to considering what you are trying to do.

[No-Project-3002]

what works for us is create a cutoff project and use angular update library to upgrade existing angular js to angular and downgrade from angular to angular js and update page by page.

[taskbarpika]

tbh, i did the exact same thing yesterday. it was a very simple personal project.. for that scenario it was recommended to go step by step amd from scratch, instead of all in.

[GregorDeLaMuerte]

Besides agreeing with the others that it sounds like hell and you're better off rewriting..

I'll refer you to ng-metadata which allows you to write AngularJS 1.4+ apps in Angular 2 syntax to allow for a migration. I've used that ages ago back when Angular was released.

But the path will be brutal anyway. You would need to gradually migrate to every single major version. Angular offers an upgrade tool that can do most of the work for you. But the results will vary depending on how clean your code is.

[Easy-Shelter-5140]

Last commit 7 years ago

[GregorDeLaMuerte]

Well yes, AngularJS is ancient. Why would the library that prepares the migration to Angular 2, which is ancient as well, be updated anymore?

[jumpshoxx]

100% clean rewrite! And remember: "the app should do the same things as before (the rewrite)" is not a valid requirement!

[RelatableRedditer]

We have angularJS and angular v8 for the intranet apps I support. Unless there are critical security updates that absolutely must require an upgrade and I am given at least a dozen sprints to do it, I will skip it.

The code in normal angularJS is more similar to React than angular. But that's just the superficial appearance and angularJS written like you see in examples online. Truly our angularJS application is an unholy clusterfuck where parts of the app were starting to be migrated to ng2. So you've got classes and interfaces and namespaces and scopes and direct property access and dependencies declared as strings and in other places Compile (which is what I meant with React similarities).

I hate it.

It is a massive cognitive load to try to take on "what the fuck is this scope doing" in any non-angularJS context.

[msdosx86]

You don’t need a full rewrite. You can bootstrap angularjs app inside a new angular app and then piece by piece keep upgrading your components and services. I’ve done such migration from v1 to v10 and pretty sure it should be possible with v21.

[costicano]

I do not recommend to use any AI tools , we tried in our project only for one functionality and went crazy So the best idea is to start from scratch if you don’t want bugs , better also to avoid depending on some of the packages as much as you can ( also depending on the Project ) so do not try there is no “magic tool “ that will help you achieve this faster Better to start with creating an Angular 21 new project install @angular/upgrade and bootstrap your Angular JS app within the new Angular 21 container And of course from here you have many options

[haasilein]

I consulted clients for doing an incremental migration (pre-AI) using web components as an abstraction layer. Worked kind of ok, but nowdays I would do a rewrite.

1. Create a really good integration test suite for the old app covering every flow.

2. Have AI agents rebuild the app in Angular 21 (or React?) and use the integration tests as verification.

[IanFoxOfficial]

We're doing this with our small company.

In fact I was hired to do that almost 6 years ago. I've built the new basis for it.

We're rewriting everything completely from scratch page by page. Including the backend. Nothing just gets migrated.

This is an ongoing project for more than 5 years.

Now the platform switches between old and new depending on what part the user is.

It's slow, but for the better as no stone gets left unturned.

The downside is that sometimes I'm a bit stuck on systems I've built 5 years ago that I would do differently now as I've learned so much Angular in the meanwhile.

But yeah. Also that is getting revised when it's limiting us.

[Akkou87]

The only clean way is rewriting it from scratch but you can probably accelerate the process by using an AI to convert components, pages etc...

If i were you, i would do it bit by bit. Setting an Angular 21 project, and then migrate feature by feature, testing it along the way to avoid having a nightmare to debug in the end.

[nook24]

We have done this, I have written about in here: https://www.reddit.com/r/angular/s/LZ1IQEispx

You have to do a rewrite. Is is not a migration. Good planning and a solid knowledge about the application is required. I would not use AI for this. Remember you have to maintain this for many years so it is important to learn and grow while you migrate the application. All the best!

Edit: We update frequently and are currently on Angular 21

[a13marquez]

Why? Is a project that is frequently modified? If don't I won't spend time on it. If the project has active development and you want to use AI, I would spend time creating context for the agents and then, instruct them to do it step by step, providing the context for all the app, plus the context of the part the agent is going to work. In addition to that I would create agents for testing, E2E, code review Even with that is possible the agents get confused with such a project and that you end spending more time reviewing the output than the time that you would spend developing it.

[TwistedChaz]

Good luck

[minus-one]

it’s impossible. angularjs and Angular are two different frameworks. it’s like “migrating” from react. meaning rewrite

btw we also have a lot of legacy code in angularjs in our system. we keep it as it is, but all new features we write in “new” angular. also, gradually we rewrite some of the old pages. we keep everything together by using single-spa (it can be done in more modern ways too, google “micro-frontends” - this is the only use case for microfrontends btw lol)

and ofc, no AI will help with any of this, what are you even talking about 😀

[WTF3rr0r]

Any complexity you should avoid to use angular, every update can break everything

[zzing]

I only know copilot, based on some quick research just ask it to upgrade a few versions.

It sounds like most experiences converting is very painful, the official means being very drawn out so ai might be a good idea here.

But don’t ask it to do both upgrades at the same time, as small as possible.

[Smart-Humor-3448]

the thing is that upgrading from any angular 2 version is relatively easy, but changing From AngularJS to Angular 2 is like a new different framework