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

score 342 · Accepted Answer · edited Apr 02 '18 at 20:39

342

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 {}

edited Apr 02 '18 at 20:39

Michael

8,362
6
61
88

answered Nov 19 '17 at 18:10

Sajeetharan

216,225
63
350
396

Can't resolve all parameters for AngularFirestore: ([object Object], ?). this error again .. – Developer Nov 19 '17 at 18:17
5

https://stackoverflow.com/questions/47026199/cant-resolve-all-parameters-for-angularfirestore-object-object – Sajeetharan Nov 19 '17 at 18:18
2

finally it worked with above link thanks @Sajeetharan – Developer Nov 19 '17 at 18:26
1

Why would I need to do that, instead of `import`ing `AngularFirestoreModule`, as the documentation says, which presumably takes care of everything including declaring `AngularFirestore` as a provider. – Jun 03 '18 at 04:21
1

for me it was already there, what solved it was simply `CTRL+C` the `ionic serve` and relaunch it ... ( happens often for some reason ever since Ionic 3 .. ) – Ricky Levi Oct 03 '18 at 19:18
Thanks , I had a similar issue were I had an Angular service but it say's it's not Inject able ,the problem fixed after adding the service class to the `provider` . – Osama Al-Banna Oct 12 '18 at 19:11
In my case is enough to stop ng serve and start again! – Alessandro_Russo Jul 11 '19 at 14:52

score 75 · Answer 2 · answered Sep 25 '18 at 13:50

75

I had same issue and below is resolved.

Old Service Code:

@Injectable()

Updated working Service Code:

@Injectable({
  providedIn: 'root'
})

answered Sep 25 '18 at 13:50

sunleo

10,589
35
116
196

shows to me the following message: "(TS) Expected 0 arguments, but got 1." – Simon Nov 28 '18 at 10:07
1

The new `providedIn` argument is only available in Angular 6 and up. – James Mar 06 '19 at 16:12
4

If it probably worth noting what this change does. Without adding `providedIn: 'root'`, we have the class recorded as being injectable. Adding the `providedIn: 'root'` makes this class injectable anywhere within the application, from the **root** on. – BluJ IT Mar 25 '21 at 17:56
@BluJIT is there some reason you wouldnt want a class injectable anywhere? – enorl76 Mar 10 '22 at 16:01
@enorl76 Yes, it changes the dependency. E.g. when you structure your app into different modules, you want its components and services in the modules ```imports``` and ```providers``` but not in ```root```. Otherwise, it defeats the point of structuring your app into different modules. – MikhailRatner May 24 '22 at 16:35

score 11 · Answer 3 · answered Dec 08 '17 at 17:02

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!

score 8 · Answer 4 · answered Apr 28 '21 at 11:24

8

Simple Answer.

Whenever you encounter NullInjector error. Reason is always import/providers is missing.

SOLUTION:

Please add the module in the imports array inside your module.ts file.
Add the services you want to use in the providers array inside your modules.ts file.

@NgModule({})
export class SomeModule{
 `imports:[]`,
`providers: []`
}

answered Apr 28 '21 at 11:24

Ritu Gupta

2,249
1
18
11

The simple answer is right, but the solution is wrong. This will make your code unmaintainable quickly – Liam Jun 24 '21 at 12:14

score 5 · Answer 5 · edited Jun 24 '21 at 12:12

5

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.

edited Jun 24 '21 at 12:12

Liam

27,717
28
128
190

answered Dec 22 '17 at 23:33

Gene

10,819
1
66
58

score 5 · Answer 6 · edited Dec 20 '18 at 13:55

5

Adding AngularFirestoreModule.enablePersistence() in import section resolved my issue:

imports: [
    BrowserModule, AngularFireModule, 
    AngularFireModule.initializeApp(config),
    AngularFirestoreModule.enablePersistence()
]

edited Dec 20 '18 at 13:55

answered May 31 '18 at 14:15

Ravichandran J

51
1
3

score 2 · Answer 7 · answered Aug 10 '19 at 21:14

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.

score 1 · Answer 8 · answered Aug 08 '19 at 07:54

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

score 1 · Answer 9 · answered Feb 15 '20 at 04:44

1

Change Your Import From :

import { AngularFirestore } from '@angular/fire/firestore/firestore';

To This :

import { AngularFirestore } from '@angular/fire/firestore';

This solve my problem.

answered Feb 15 '20 at 04:44

TaSvet

382
2
10

score 0 · Answer 10 · answered Feb 18 '19 at 09:45

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

score 0 · Answer 11 · edited Oct 13 '19 at 22:28

0

import angularFirebaseStore

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

edited Oct 13 '19 at 22:28

Marcello B.

4,177
11
45
65

answered Oct 13 '19 at 20:00

satywan kumar

207
2
3

score 0 · Answer 12 · answered Jun 07 '20 at 03:47

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!

NullInjectorError: No provider for AngularFirestore

12 Answers12

Linked

Related