angular - 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 [email protected] 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.