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

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

I got this error when missing an import for an override of an angular class. I imagine an incorrect import may cause the error in other ways also.

In my case I had no import statement for File and it defaulted to a File interface which wasn't what I wanted. Adding import { File } from "@ionic-native/file" fixed the problem.

Answer 3

I also console logged the value right before the error message statement in node_modules\@angular\compiler\bundles\compiler.umd.js file.

And checked that Document interface was there in providers array of a component which was the root cause.

I removed it to fix this issue.

Answer 4

I was running into this while using ng-packagr to package a library then importing it into another library. What ended up being my problem was indeed the 'barrel' index.ts imports.

This was making it break

import { Activate, Another, Data } from './services
@NgModule({ providers: [ Activate, Another, Data ]})

where in the services folder I had one index.ts file that was exporting all of the services.

This fixed it:

import { Activate } from './services/activate.service.ts'
import { Another} from './services/another.service.ts'
import { Data } from './services/data.service.ts'
@NgModule({ providers: [ Activate, Another, Data ]})

Answer 5

in my case i changes this

  @Injectable()
    export class LocationTracker {
    }

to

  @Injectable()
    export class LocationTrackerProvider {
    }

Answer 6

Check if the module can find the service you have mentioned.

In my case I was exporting a guard from my guards folder. this folder contained an index.ts file. There were two more files in this guards folder auth.guard.ts and company.guard.ts. Ideally I should have exported these files in the index as follows:

contents of guards/index.ts

export * from './auth.guard';
export * from './company.guard'; // forgot this 

But I forgot to include the line above that exports from company.guard.ts. This was creating problem.