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

user_4232036 0
Viewed 888

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?

  1. 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?

  1. 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.

nrwl nrwl-nx angularfire2 angular firebase
3 Answers
  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.
user_708710

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

user_113452350

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.

user_6720970
Related