Error: “Encountered undefined provider! Usually th

Question

Here's a somewhat useless error I'm getting in my Angular / TypeScript application. Until someone makes the error message better, what can we do about this? What are the most likely situations that cause this to happen?

Uncaught Error: Encountered undefined provider! Usually this means you have a circular dependencies (might be caused by using 'barrel' index.ts files.
    at Object.syntaxError 
    at eval     at Array.forEach (native) [<root>]
    at CompileMetadataResolver._getProvidersMetadata 
    at CompileMetadataResolver.getNgModuleMetadata 
    at CompileMetadataResolver.getNgModuleSummary 
    at eval 
...

Answer 1

in my case I just deleted the @Injectable() decorator from my service(cause it didn't need any services to be injected in it)

Answer 2

in my case, very simple, it was really undefined provider in the module definition.
Because the lib I used, had an option to dynamically change their providers and it was wrong configured, so it loaded undefined as providers.

Answer 3

Got this error running --prod.

You can't import things like that:

import { MyService } from '.';

You should use the full path

import { MyService } from './my.service'

Answer 4

Sometime this issue occurred because of some dependency in third party api used in angular app. I faced same issue and resolved it using following steps:

1. Removed package.lock.json file
2. Deleted node_modules folder
3. Again run npm install
4. Run "ng build --prod" These steps will resolve your issue.

Answer 5

I got my way around this by flattening all of the barrel imports(which kinda defeats the purpose of using barrel files in the first place, but I can't afford losing more time on this).

Answer 6

One possibility is trying to declare a service and module in the same file, and declaring the module before the service:

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

@NgModule({providers: [FooService]}) // WRONG: used before declared
export class FooModule {
}

@Injectable()
export class FooService {
}

You can fix this by declaring the service first, or you can use forwardRef like this:

import {forwardRef, Injectable, NgModule} from '@angular/core';

@NgModule({providers: [forwardRef(() => FooService)]})
export class FooModule {
}

@Injectable()
export class FooService {
}