Firebase migration example

When you build a web application, reducing bundle size is essential to improve loading speed and user experience. In that context, Firebase can become a bottleneck because it used to add a large amount of code to the final bundle.

Firebase version 9 introduced the modular Web API; current Firebase SDKs keep that tree-shakeable style. In this article I explain the migration from Firebase 7 to 9 in Angular and show practical examples of the required changes.

2026 context: modular Firebase and standalone Angular

Read this article as a historical migration guide from the namespaced Firebase API to the modular Web SDK. The same idea is still useful today: import only the Firebase services you use, measure the resulting bundle and avoid compat libraries in production unless they are part of an incremental migration.

In new Angular projects, standalone components and app-level providers are now the normal baseline. If your project no longer has app.module.ts, place Firebase setup in a service, app.config.ts or the provider pattern used by your Angular/Firebase wrapper, and keep the examples below as API comparison rather than a mandatory file structure.

You can review the sample code here: https://github.com/al118345/migracion_angular_firebase9 and this video: https://www.youtube.com/watch?v=cpR0NDDWOCw:

1. Optimizing your Angular project

When you start an Angular project, it is easy to keep adding npm packages until the final bundle becomes much larger than expected.

Application size matters for two reasons:

Performance: smaller applications start faster, consume fewer resources and reduce bounce rate.
Costs: lighter bundles usually reduce infrastructure and delivery costs.

2. Slimming down the application

A practical way to understand what is increasing bundle size is to inspect the generated bundles with webpack-bundle-analyzer.

This tool displays an interactive heatmap so you can see which dependencies take the most space.

To install the library, run:

After that, build the project with the --stats-json option:

This generates a stats.json file.

Then execute the following command, where path_to_stats_file is the path to that file:

The result is the following heatmap:

1. Example result

3. Firebase migration example

Applications using Firebase Web SDK 8 or earlier often imported the namespaced API, which made it easier to ship more code than necessary.

Firebase package size — 1. Firebase size example in version 7

That affects both performance and efficiency. The modular Firebase Web SDK is designed for tree-shaking, so each service should import only the functions it really uses and the result should be checked with a bundle analyzer.

Library installation

Install the current Firebase Web SDK with:

Then remove the following modules from src/app/app.module.ts:

In this example, Firebase credentials are stored in src/environments/environments.prod.ts using this structure:

Once those modules are removed, import the modular libraries directly in the component or service that needs them.

This is a login example in Firebase 7 using email and password:

The equivalent implementation in version 9 is:

If you want to fetch data from Firebase Realtime Database in version 7, you would use:

In version 9, the equivalent code is:

If you use Cloud Firestore, version 7 would look like this:

And the version 9 equivalent is:

Finally, here is an example of Firebase communication where obtener_base_de_datos_realtime() is called synchronously and handled with then/finally: