NullInjectorError No provider for AngularFirestore

Question

I m learning Angular looking for help in fixing the error  I m following this link   https   github com angular angularfire2 blob master docs install-and-setup md to create a angular small app with angular2 and angularfirestore2  but when I hit ng serve I am getting the below error in browser console    StaticInjectorError AngularFirestore      StaticInjectorError AngularFirestore        NullInjectorError  No provider for AngularFirestore      at  NullInjector get  core js 923      at resolveToken  core js 1211      at tryResolveToken  core js 1153      at StaticInjector get  core js 1024      at resolveToken  core js 1211      at tryResolveToken  core js 1153      at StaticInjector get  core js 1024      at resolveNgModuleDep  core js 10585      at NgModuleRef  get  core js 11806      at resolveDep  core js 12302    I tried googling it but didn t find the exact solution nothing worked for me      Here is what I followed  1  Installed Node Version 8 9 1 2  npm install -g  angular cli --  Version 1 5 2 3  ng new  project-name  4  npm install angularfire2 firebase --save  Here are my app module ts file   import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core   import   AppComponent   from    app component   import   AngularFireModule   from  angularfire2   import   environment   from     environments environment     NgModule     imports        BrowserModule      AngularFireModule initializeApp environment firebase         declarations    AppComponent      bootstrap    AppComponent      export class AppModule      app component ts   import   Component   from   angular core   import   AngularFirestore   from  angularfire2 firestore   import   Observable   from  rxjs Observable     Component     selector   app-root     templateUrl     app component html     styleUrls      app component css      export class AppComponent     title    app     constructor db  AngularFirestore         environemnt ts   export const environment       production  false    firebase        apiKey   xxxxx       authDomain   aaaaaaa       databaseURL   bbbbbbbbbbbbbbbbbb       projectId   aaaaaaaaaaaaaa       storageBucket   aaaaaaaaaaaa       messagingSenderId   aaaaaaaaaaaaa           then ng serve  and I am getting the above error

User · Answer

Open    src app app module ts  And import Firebase Modules at the top      import   environment   from     environments environment     import   AngularFireModule   from  angularfire2     import   AngularFirestoreModule   from  angularfire2 firestore     And VERY IMPORTANT  Remember to update  imports  in NgModule    NgModule     declarations        AppComponent      OtherComponent    Add other components here                imports        BrowserModule      AngularFireModule initializeApp environment firebase   your-APP-name-here        AngularFirestoreModule                 Give it a try  it shall now work  For detailed information follow the angularfire2 documentation  https   github com angular angularfire2 blob master docs install-and-setup md Good luck

User · Answer

Change Your Import From    import   AngularFirestore   from   angular fire firestore firestore     To This    import   AngularFirestore   from   angular fire firestore     This solve my problem

User · Answer

I solved this problem by just removing firestore from   import   AngularFirestore   from   angular fire firestore firestore     in my component ts  file  as use only   import   AngularFirestore   from   angular fire firestore     this can be also your problem

User · Answer

import angularFirebaseStore    in app module ts and set it as a provider like service

User · Answer

I had the same issue while adding firebase to my Ionic App  To fix the issue I followed these steps   npm install  angular fire firebase --save   In my app app module ts       import   AngularFireModule   from   angular fire   import   environment   from     environments environment   import   AngularFirestoreModule  SETTINGS   from   angular fire firestore     NgModule     declarations   AppComponent     entryComponents        imports        BrowserModule       AppRoutingModule      AngularFireModule initializeApp environment firebase       AngularFirestoreModule        providers          provide  SETTINGS  useValue              bootstrap   AppComponent       Previously we used FirestoreSettingsToken instead of SETTINGS  But that bug got resolved  now we use SETTINGS   link   In my app services myService ts I imported as   import   AngularFirestore   from   angular fire firestore     For some reason vscode was importing it as   angular fire firestore firestore  I After changing it for   angular fire firestore   the issue got resolved

User · Answer

For AngularFire2 Latest version  Install AngularFire2    npm install --save firebase  angular fire   Then update app module ts file      import   BrowserModule   from   angular platform-browser       import   NgModule   from   angular core        import   AppComponent   from    app component       import   FormsModule   from   angular forms         import   AngularFireModule   from   angular fire       import   AngularFireDatabaseModule   from   angular fire database       import   environment   from     environments environment       import   AngularFirestoreModule   from   angular fire firestore          NgModule         declarations            AppComponent                imports            BrowserModule          FormsModule           AngularFireModule initializeApp environment firebase           AngularFirestoreModule          AngularFireDatabaseModule                providers            bootstrap   AppComponent             export class AppModule       Check FireStore CRUD operation tutorial here

User · Answer

I take that to my app module  After the imports it should be works  providers          provide  LocationStrategy  useClass  HashLocationStrategy          provide  FirestoreSettingsToken  useValue              My Version   Angular CLI  7 2 4 Node  10 15 0 Angular  7 2 5     common  compiler  compiler-cli  core  forms     language-service  platform-browser  platform-browser-dynamic     router  Package                           Version -----------------------------------------------------------  angular-devkit architect         0 12 4  angular-devkit build-angular     0 12 4  angular-devkit build-optimizer   0 12 4  angular-devkit build-webpack     0 12 4  angular-devkit core              7 2 4  angular-devkit schematics        7 2 4  angular animations               8 0 0-beta 4 7 sha-3c7ce82  angular cdk                      7 3 2-3ae6eb2  angular cli                      7 2 4  angular fire                     5 1 1  angular flex-layout              7 0 0-beta 23  angular material                 7 3 2-3ae6eb2  ngtools webpack                  7 2 4  schematics angular               7 2 4  schematics update                0 12 4 rxjs                              6 3 3 typescript                        3 2 4 webpack                           4 28 4

User · Answer

I had same issue and below is resolved   Old Service Code    Injectable     Updated working Service Code    Injectable     providedIn   root

User · Answer

You should add providers   AngularFirestore  in app module ts    NgModule     imports        BrowserModule      AngularFireModule initializeApp environment firebase         declarations    AppComponent      providers   AngularFirestore     bootstrap    AppComponent      export class AppModule

User · Answer

Adding AngularFirestoreModule enablePersistence   in import section resolved my issue   imports        BrowserModule  AngularFireModule       AngularFireModule initializeApp config       AngularFirestoreModule enablePersistence

User · Answer

Weird thing for me was that I had the provider     but the HTML tag that uses the provider was what was causing the error  I m referring to the red box below    It turns out I had two classes in different components with the same  employee-list component ts  filename and so the project compiled fine  but the references were all messed up

[angular] NullInjectorError: No provider for AngularFirestore

Examples related to angular

Examples related to firebase

Examples related to google-cloud-firestore

Examples related to angularfire2