How add @angular/fire into Nx Workspace (Angular project)?

Question

I would like to add @angular/fire into my Nx workspace (Angular app).

I'm trying to keep in line with best practices, however, there's nothing in the official docs regarding adding this library into the workspace.

Or am I missing something?

1. INSTALLATION
   
   • is it OK to install the lib via the standard command?
     
   • npm i @angular/fire ... or ... ng add @angular/fire
     
   • Is there a specific 'Nx way' of installing it?

2. PLACING & NAMING
   In which module should I call the initializeApp() method?

   • in the AppModule? (this is how I used to do it before adopting Nx)

   • or a lib module? (this seems to me closer to the Nx philosophy)

   • if the answer is 'a lib module'

     • which module should it be?
     • where should I put the lib/module and what should I name it?
     • would 'libs/data-access/api' be a good idea?

3. USING THE API
   
   • How do I use the installed package and initialized module(lib)?
   • Should I import the api lib multiple times into every lib that would need the functionality?
   • Or do I import the api lib only once into the app?

Sticking to best practices (naming conventions, etc.) so tightly might seem silly, but I really want to do things the right way.

Nuris

Answer 1

for those who are getting this error: No Angular project selected and no default project in the workspace

I had to include a --project flag

nx g @angular/fire:ng-add --project my-app

Trix

Answer 2

1. You can install it with npm (npm i @angular/fire) and then run nx g @angular/fire:ng-add. Docs: https://nx.dev/latest/angular/getting-started/cli-overview#ng-add-functionality
2. This should be in your app's AppModule still.
3. You can import the package everywhere it is needed. The AppModule needs to import the package and set up the app so that other libs can consume it. It's no different than using @angular/router or @ngrx/store in both apps and libs.

Millimicron

thank you for your answer, however, when I type in the "nx g @angular/fire:ng-add" => I'm getting and error "Unable to resolve @angular/fire:ng-add. EISDIR: illegal operation on a directory, read". Any Idea why this could be happening? – Nuris

@PaxForce I have that same issue. Did you find out why that is? – Zucchetto

This answer works for me in a new Nx standalone Angular project with Angular 16.0.0 and @angular/fire 7.6.1. However, because the app is using the new Angular standalone feature (no NgModules), I did have to create an app.module.ts file to make the generator to work and then manually move the providers into the applicationConfig object. – Peridium

Answer 3

first of all you need to download firebase

npm i @angular/fire

and add firebase in angular project

ng add @angular/fire

And now import firebase in app.module.ts

import { AngularFireModule } from '@angular/fire';  

@NgModule({  
  imports: [  

    AngularFireModule.initializeApp(environment.firebase)  
  ],  

})  

export class AppModule {}

and now you can use firebase in angular project

link for official docs

https://github.com/angular/angularfire

Adherent

I know - this is the standard Angular way. But I want to do it the 'nx-workspace way'. That would probably mean to have the functionality extracted to a library and use in a specific way. – Nuris

Answer 4

You can just install it with npm install.

I’d suggest initializing in the app module. The Nx philosophy of applications is that they’re responsible for composing and configuring libraries. It’s especially important to initialize in the app module instead of libraries when using singletons (like Firebase, root router module, ngrx store initialization), so that you don’t accidentally initialize a singleton more than once.

You should be able to import directly from angularfire in your libraries.

Enforcement

Answer 5

following steps work for me:

• npx [email protected]
• npm i @angular/fire
• firebase logout
• firebase login
• nx g @angular/fire:ng-add

details and pictures can be found here:

https://blog-host-d6b29.web.app/2022/11/27/nx-angular-fire.html

Decennary

Answer 6

Besides instructions above I still had an error saying No Angular project selected and no default project in the workspace during nx g @angular/fire:ng-add installation process

all I had to do was to add "defaultProject" property with proper string project name value to nx.json

Ulises