Upgrading a Live Store From Angular 8 to 13 in 20 Days

We upgraded AutoBuffy’s storefront from Angular 8 to Angular 13 in 20 days, and added server-side rendering on top. AutoBuffy is a US online store for auto parts. Its outdated Angular 8 frontend was holding back its technical SEO. Here is how an upgrade like this runs.

1. 01Why the upgrade mattered

   Without server-side rendering, an Angular app builds each page in the browser. Search engines first get a nearly empty page and must run JavaScript to see the content. Google can do that, but it takes longer, and most AI crawlers don’t run JavaScript at all.

   Server-side rendering fixes this by sending finished HTML. We did the upgrade first, then added rendering on the new version.

2. 02One major version at a time

   Angular’s update guide recommends moving one major version at a time. Going from 8 to 13 means five upgrades: 9, 10, 11, 12 and 13. After each one, the app has to build and run before the next begins.

   The Angular CLI’s ng update command does most of the mechanical work. It updates the packages and runs migrations that rewrite code for the new version.

3. 03The big change: Ivy

   Angular 9 made Ivy the default compiler and renderer. Angular 13 removed the old View Engine for apps, so Ivy is the only option.

   Third-party libraries set the pace. At each step, every Angular dependency needs a release that supports the new version. The ones that don’t have to be upgraded, replaced or removed before you continue.

4. 04Adding server-side rendering

   Once on 13, the server sends each page as finished HTML, and Angular takes over in the browser. Search engines and link previews see the parts and descriptions straight away.

   Code that touches window, document or localStorage has to be guarded, because those don’t exist on the server. That is where most rendering bugs hide.

   After server-side rendering went live, AutoBuffy’s search visibility and clicks improved.

5. 05What took the most effort

   1. Third-party libraries. Some had no release for the newer Angular versions, so they had to be upgraded, replaced or removed.

   2. RxJS and TypeScript. Each Angular version needs newer releases of both, and the version bumps broke existing code.

   3. Server-side rendering. Browser-only code across the store had to be found and guarded.

   4. Keeping the store live. We did the work alongside the live store, then switched over in a short maintenance window.

6. 06What else changed on AutoBuffy

   The upgrade was one part of a longer project. We moved part search to Elasticsearch, because large database tables made it slow and caching alone didn’t help. We added Klarna buy now, pay later through Stripe, which lifted sales by 50%.

   We also split the storefront and admin onto separate servers, so heavy admin uploads don’t slow shoppers down. A new microservice syncs inventory from vendors in real time, replacing FTP, CSV and Excel uploads.