DEV Community

Cover image for Configuring Firebase with Angular standalone component
edisne
edisne

Posted on

Configuring Firebase with Angular standalone component

#firebase #angular #standalone #typescript

Being that by default (using Angular 17 ✨), generating a component using CLI, we get a standalone component and lack of updated documentation from Firebase I decided to publish my implementation of, in this case, a Real-time database connection.

First of, in my main.ts I initialized the app and analytics

import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from './app/app.config'; import { AppComponent } from './app/app.component'; import { initializeApp } from 'firebase/app'; import { firebaseConfig } from '../src/app/environments/environment'; import { getAnalytics } from 'firebase/analytics'; bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err) ); const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app);
Enter fullscreen mode Exit fullscreen mode

Then in my environment.ts I added firebaseConfig (That you get after creating a Web App on Firebase Console)

export const firebaseConfig = { apiKey: 'XXXXXXXXXXXXXXXXXXXX', authDomain: 'XXXXXXXXXXXXXXXXXXXX', projectId: 'XXXXXXXXXXXXXXXXXXXX', databaseURL: 'XXXXXXXXXXXXXXXXXXXX', storageBucket: 'XXXXXXXXXXXXXXXXXXXX', messagingSenderId: 'XXXXXXXXXXXXXXXXXXXX', appId: 'XXXXXXXXXXXXXXXXXXXX', measurementId: 'XXXXXXXXXXXXXXXXXXXX', };
Enter fullscreen mode Exit fullscreen mode

And it's pretty much ready to use, with no extra modules import and configuration. In your Component you first import:

import { getDatabase, ref, set } from 'firebase/database';

Then instantiate the database with:

databaseInstance = getDatabase();

and mutate data like so:

saveData(data) { set(ref(this.databaseInstance, `/collection`), { date: new Date().toISOString(), ...data, }) .then(() => { this.isSuccess = true; }) .catch((error) => { this.isError = true; console.log('Failed to save data: ', error); }); }
Enter fullscreen mode Exit fullscreen mode

And that's it, hopefully, it saves someone at least a few minutes of frustration when configuring Firebase with standalone components. If I said something wrong, or you have some extra questions, feel free to write in comments. Cheers🍻

Top comments (1)

Collapse
 
rtpharry profile image
Matthew Harris •

I think this is out of date documentation now. The app config can have the providers added in directly, like:

export const appConfig: ApplicationConfig = { providers: [ appRouting, provideIonicAngular(), provideFirebaseApp(() => initializeApp(environment.firebaseConfig)), provideAuth(() => getAuth()), provideFirestore(() => getFirestore()), // etc ], };
Enter fullscreen mode Exit fullscreen mode

And then you can inject it into your service using the traditional method:

@Injectable({ providedIn: "root", }) export class ExampleService { constructor( private firestore: Firestore ) {} }
Enter fullscreen mode Exit fullscreen mode

or the new inject() method.

The big problem I had which led me to articles like this was that I was getting NullReferenceInjector. Which turned out to be because I was importing from "firebase/firestore" instead of from '@angular/fire/firestore'.