#Cannot use AngularFire (firebase) with Angular 18 in a Standalone Project

12 messages · Page 1 of 1 (latest)

woeful basin
#

error it generates:

main.ts:32 ERROR FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).
    at getApp (index.esm2017.js:625:25)
    at getAuth (index-2788dcb0.js:10593:24)
    at new _AuthService (auth.ts:26:10)
    at Object.AuthService_Factory [as factory] (auth.ts:212:3)
    at core.mjs:3135:35
    at runInInjectorProfilerContext (core.mjs:866:5)
    at R3Injector.hydrate (core.mjs:3134:11)
    at R3Injector.get (core.mjs:3008:23)
    at ChainedInjector.get (core.mjs:5285:32)
    at lookupTokenUsingModuleInjector (core.mjs:5628:31)

My main.ts

import { initializeApp } from 'firebase/app';
import { provideFirebaseApp } from '@angular/fire/app';

... // All other imports

bootstrapApplication(AppComponent, {
  providers: [
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideAuth(() => getAuth()),
    importProvidersFrom(
      BrowserModule,
      GoogleMapsModule,
      ReactiveFormsModule,
      MatSlideToggleModule,
      MatDividerModule,
      FormsModule,
      DragDropModule,
      LayoutModule,
      AppRoutingModule,
      NgbModule,
      HotToastModule.forRoot()
    ),
    ScreenTrackingService,
    UserTrackingService,
    AuthService,
    DatabaseService,
    HelperService,
    LocationService,
    EventService,
    provideHttpClient(withInterceptorsFromDi()),
    provideAnimations(),
  ],
}).catch((err) => console.error(err));
lethal igloo
#

Replace your imports from firebase/app by imports from @angular/fire/app.

woeful basin
#

I have removed all imports from firebase/app and use @angular/fire/app instead

#

import { initializeApp } from '@angular/fire/app';
import { provideFirebaseApp } from '@angular/fire/app';
import {
ScreenTrackingService,
UserTrackingService,
} from '@angular/fire/analytics';
import { AuthService } from './app/shared/services/auth';
import { DatabaseService } from './app/services/database-service';
import { HelperService } from './app/services/helperService';
import { LocationService } from './app/services/location-service';
import { EventService } from './app/services/event-service';
import {
provideHttpClient,
withInterceptorsFromDi,
} from '@angular/common/http';
import { environment } from './environments/environment';
import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import { GoogleMapsModule } from '@angular/google-maps';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatDividerModule } from '@angular/material/divider';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { LayoutModule } from '@angular/cdk/layout';
import { AppRoutingModule } from './app/app-routing.module';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HotToastModule } from '@ngneat/hot-toast';
import { AppComponent } from './app/app.component';
import { provideRouter, RouterModule } from '@angular/router';
import { routes } from './routes/global.routes';
import { getDatabase, provideDatabase } from '@angular/fire/database';

lethal igloo
#

Given the error message, my guess is that you're using an old version of angularfire. Use the latest one.

woeful basin
#

I am using 18.0.1 and have tried to delete my node_modules

lethal igloo
#

If you provide a complete minimal repro, as a stackblitz or as a github project, I can have a look.

woeful basin
#

i can try, give me a moment

#

But this error

It says that i cant use AngularFire outside of an NgModule...

but i am in a standalone project using only standalone components.

image.png
lethal igloo
#

That's precisely what makes me think you're using an old version. I successfully use AngularFire in a fully standalone project, for quite a long time.

woeful basin
#

Yeah but i am really not :/