add standalone support for ng add @angular/fire

[robertIsaac]

Version info

Angular: 16.0.3

Firebase: N/A

AngularFire: 7.6.1

Other (e.g. Ionic/Cordova, Node, browser, operating system): node 18.16, windows

How to reproduce these conditions

Steps to set up and reproduce

ng new fire-esbuild-reprod --standalone
cd fire-esbuild-reprod
ng add @angular/fire

Debug output

Specified module path /src/app/app.module.ts does not exist

Expected behavior

the ng add to complete

Actual behavior

it throw an error

[1GBattle]

I am having the same problem were you able to find a fix?

[robertIsaac]

I am having the same problem were you able to find a fix?

I'd suggest to create a new project without a standalone, add firebase to it, then copy the generated files to your standalone project

[DimitriTsikaridze]

I am having the same problem were you able to find a fix?

I'd suggest to create a new project without a standalone, add firebase to it, then copy the generated files to your standalone project

or just create app.module.ts file add class with ngmodule decorator and then run the command. it won't throw an error and you can simply copy what was generated inside module to main.ts without creating whole new app.

import {NgModule} from "@angular/core"

@NgModule({
providers: []
})
export class AnyName{}

[spock123]

This is how I do it, I make a file with firebase configuration, which exports the "provide" functions, and this is then used in the app configuration:

# My firebase environment is saved in the Angular environment file
# @environment is just a typescript path alias
import { importProvidersFrom, EnvironmentProviders } from '@angular/core';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { environment } from '@environment';

const firebaseProviders: EnvironmentProviders = importProvidersFrom([
    provideFirebaseApp(() => initializeApp(environment.firebase)),
    provideFirestore(() => getFirestore()),
    provideAuth(() => getAuth())
]);

export { firebaseProviders };

Then in app.config.ts:

import { ApplicationConfig, isDevMode } from '@angular/core';
import { firebaseProviders } from '@shared/firebase';
# ... other stuff

export const appConfig: ApplicationConfig = {
    providers: [
       # ... other providers
        firebaseProviders
      
    ]
};

[sasidharansd]

We should try to add it somewhere in the docs page, since angular made the standalone component as a default way when creating a new component. This will make things easy for new devs who are relatively new to angular.

[Yassinmoh]

I get this error I use Angular v17 and @angular/fire: ^17.0.0-next.0 ERROR NullInjectorError: R3InjectorError(Standalone[_SubmitPageComponent])[Firestore -> Firestore -> Firestore -> Firestore]: NullInjectorError: No provider for Firestore!

[robertIsaac]

fixed by https://github.com/angular/angularfire/pull/3451

[robertIsaac]

I get this error I use Angular v17 and @angular/fire: ^17.0.0-next.0 ERROR NullInjectorError: R3InjectorError(Standalone[_SubmitPageComponent])[Firestore -> Firestore -> Firestore -> Firestore]: NullInjectorError: No provider for Firestore!

I tried it now, it works fine for me here is the generated code in app.config.ts

    importProvidersFrom(
      provideFirebaseApp(() => initializeApp({
        'projectId': '...',
        'appId': '...',
        'storageBucket': '...',
        'apiKey': '...',
        'authDomain': '...',
        'messagingSenderId': '...',
      }))),
    importProvidersFrom(provideFirestore(() => getFirestore()))],