How to read firebase configuration from an angular web application?

Question

I have an Angular application where I use the environment.ts to store api keys and other configuration. I want to deploy this application to Firebase so I can move the config form environment files to the Firebase config so I set the variables as explained here

Then when I run the command firebase functions:config:get I correctly get the configuration I expect. But now I don't know how to get this config in my Angular project. What I've done until now is create an app in the Firebase so I've the config in environment.ts like this:

    firebase: {
        apiKey: 'apiKey',
        // Other properties
    },

And in app.module.ts:

    imports: [
        // ...
        AngularFireModule.initializeApp(environment.firebase),
    ],

But from here I don't know how to get the config. I tried with the npm package firebase-functions and run functions.config() but I get a lot of error for libraries like fs, zlib etc. I guess is not meant for client side use.

How can I get the Firebase config from the Angular app?

question from:https://stackoverflow.com/questions/65603162/how-to-read-firebase-configuration-from-an-angular-web-application

Answer 1

You should not use the functions config on the client-side, as the functions config is going to include administrative access to your project.

At the moment AngularFire doesn't support dynamic loading of the Firebase configuration, so you'll want to bake it into the your environment before you deploy.