Error: "Encountered undefined provider! Usually this means you have a circular dependencies"

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

It is very hard to tell from the error message which provider causes this issue. The way I managed to debug this is the following:

• I went into the node_modules@angular\compiler\bundles\compiler.umd.js file
• I found the line where it says: "Encountered undefined provider! Usually this means you have a circular dependencies. This might be caused by using 'barrel' index.ts files."
• One line before I added console.log('type', type); in order to see in which file is the undefined provider (You can also console log other relevant variables there).
• In the relevant file I found the 'barrel' import that caused the issue, and replaced it with exact file path import.

Answer 2

For me, I just restart the ng serve

Answer 3

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

Answer 4

I have no reputation yet to comment on https://stackoverflow.com/a/51304428/2549593 But better add following:

console.error('\ntype: ', type, '\nproviders: ', (providers || []).map(p => p && (p.name || p.useClass || p.useValue || p.useFactory || p.useExisting)));

It will display providers list and module with the problem, so you can open it, and check this providers list: one which was marked as undefined - should be fixed