Become a master of the famous Angular error: "NullInjectorError: No provider for x"

As I have taught Angular over the years, one of the most frequent problems I get asked about is related to the following error message:

NullInjectorError: No provider for x

Once you mostly understand Angular, this will be a breeze to fix. A lot of times it will be accompanied by a phrase like “duh, I forgot to do that!". But if you have minimal to no previous experience with Angular, this is an error you could stare at for a while, perhaps even hours, and not make any progress.

If you’re getting this error and you’re looking for help, you’ve come to the right place.

Custom Angular Service

The first thing you may want to define is which Angular version of Angular you’re using. Prior to Angular 6, this error would pop up quite often in custom services, meaning service classes that you write yourself.

Beginning in Angular 6, this got a whole lot easier by the introduction of the providedIn property of the @Injectable() decorator. It would look something like this:

1
2
3
4
5
6
7
8

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class ExampleService {
  // your class implementation goes here...
}

When the providedIn property of the @Injectable() decorator is set to 'root' as shown in line 9 above, you’re essentially telling Angular that you want the singleton it will create for this class to be available at the application root level. This will make the service available virtually from anywhere within your app. If you’re not sure what that means, think of a tree structure where each child node inherits from the parent all that the parent has access to. In Angular, Angular modules are structured in a tree diagram. The application root module is the highest module there is in this structure. Any other application module (also known as submodules), inherits everything that their parent module has all the way to the root module.

If you’re missing the providedIn property of the @Injectable() decorator and are using Angular 6 or above, you should be able to resolve your issue by adding that property and setting it to 'root' as shown.

But life prior to Angular 6 wasn’t as easy. Ok, maybe life was the same, but the way to fix it was different. Despite Angular 5 and prior not having the providedIn property of the @Injectable() decorator available, Angular still expected to be told in which module a particular custom service should be available or “provided in”. A typical service in Angular 5 and prior would look like this:

1
2
3
4
5
6

import { Injectable } from '@angular/core';

@Injectable()
export class ExampleService {
  // your class implementation goes here...
}

Notice that the @Injectable() decorator still has to be used in these older Angular versions, but no providedIn property is available. So, how do you tell Angular where you want this service to be available at? The answer is quite simple, and in fact, it is still valid and available in Angular 6 and later: you add the service class to the providers array. It would look like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

import { NgModule } from '@angular/core';
import { ExampleService } from './example.service';

@NgModule({
  imports: [
    // whatever ...
  ],
  declarations: [ 
    // whatever...
  ],
  providers: [
    ExampleService 
  ]
})
export class ExampleModule { }

Services from Third-party Libraries

If the error you’re getting is related to a service (or provider) that you did not write, nor it’s found in your app project source code, then you’re probably dealing with a service that is declared in a third-party library module. All of these sorts of third-party libraries that I have used are really good at keeping this part of their documentation accurate. They have to! Otherwise, nobody would be able to use their library 😬. If you’ve looked at it and have tried their recommendations and still “no dice”, my guess is that you still haven’t added it at the proper module level, which does take some Angular module skills. My next article is on Angular modules if you need some extra help.

I hope this has given you at least a path to pursue, if not a solution to your problem. Next time you see the error “NullInjectorError: No provider for x”, you will be able to fix it like a pro.