angular / angular/angularfire

how to Initialize the config dynamically?

Open
#3,565 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
7.8k
Forks
2.2k
Avg merge
22h 28m
Merged PRs (30d)
6

Description

I'm looking for a simple way to `initializeApp` later inside of the `app.component.ts` NOT in my `app.config.ts`. I need to do this because of my current app implementation and requirements...

Currently, here's my `app.config.ts` file:
```ts
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { getAnalytics, provideAnalytics } from '@angular/fire/analytics';

export const appConfig: ApplicationConfig = {
providers: [
provideFirebaseApp(() =>
initializeApp({
apiKey: 'xxx',
authDomain: 'xxx.firebaseapp.com',
databaseURL: 'https://xxx.firebaseio.com',
projectId: 'xxx',
storageBucket: 'xxx',
messagingSenderId: '123',
appId: 'xxx',
measurementId: 'xxx',
}),
),
provideAnalytics(() => getAnalytics()),
...
],
...
})
```

Any help is so appreciated ❤️

### Version info

**Angular:** 17.3.3

**Firebase:** ^10.13.1

**AngularFire:** ^18.0.1

Contributor guide

Open the contributing guide

Research direction

Start by comparing the current app.config.ts setup with the requested initialization point in app.component.ts, focusing on provideFirebaseApp, initializeApp, provideAnalytics, and getAnalytics. Determine whether the existing entry points support deferred configuration and define a reproducible Angular 17/Firebase 10 behavior that confirms the configuration is initialized later.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, firebase, typescript
Domain
developer-experience, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.