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

Solution 1

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

Solution 2

I had same issue and below is resolved.

Old Service Code:

@Injectable()

Updated working Service Code:

@Injectable({
  providedIn: 'root'
})

Solution 3

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!

Solution 4

Simple Answer.

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

SOLUTION:

1. Please add the module in the imports array inside your module.ts file.

2. Add the services you want to use in the providers array inside your modules.ts file.

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

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

View more solutions

Comments

[Developer]

Can't resolve all parameters for AngularFirestore: ([object Object], ?). this error again ..

[Sajeetharan]

stackoverflow.com/questions/47026199/…

[Developer]

finally it worked with above link thanks @Sajeetharan

[Admin]

Why would I need to do that, instead of importing AngularFirestoreModule, as the documentation says, which presumably takes care of everything including declaring AngularFirestore as a provider.

[Ricky Levi]

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

[Osama Al-Banna]

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 .

[Simon]

shows to me the following message: "(TS) Expected 0 arguments, but got 1."

[James]

The new providedIn argument is only available in Angular 6 and up.

[Alessandro_russo]

In my case is enough to stop ng serve and start again!

[BluJ IT]

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.

[Liam]

The simple answer is right, but the solution is wrong. This will make your code unmaintainable quickly

[enorl76]

@BluJIT is there some reason you wouldnt want a class injectable anywhere?

[MikhailRatner]

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