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

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 
...

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.

For me, I just restart the ng serve

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

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

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 ]})

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'

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.

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.

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.

in my case i changes this

  @Injectable()
    export class LocationTracker {
    }

to

  @Injectable()
    export class LocationTrackerProvider {
    }

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

In case of Ionic

@NgModule({
providers: [ storage, ... ]
})

remove storage from app.module.ts since @ionic/storage 2.x.x we import IonicStorageModule instead of storage

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.

@Component({
  selector: "app-dispatching-history",
  templateUrl: "./dispatching-history.component.html",
  styleUrls: ["./dispatching-history.component.css"],
  providers: [RecommendationService, Location, { provide: HashLocationStrategy, useClass: HashLocationStrategy }]
})

I just added Location, { provide: HashLocationStrategy, useClass: HashLocationStrategy } as a provider in one of my component and didn't do any other necessary changes in files like app.module.ts. I don't need it anymore, so I simply remove it. And the command ng build -c deploy --build-optimizer --aot --prod --sourceMap works again.

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).

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.

My the Angular project when use npm angular library packaging raise error:

ERROR in : Encountered undefined provider! Usually this means you have a circular dependencies. This might be caused by using 'barrel' index.ts files.

This is because define alias on public_api.ts

example :

// it's wrong
export { HeaderService as HeaderService } from "./lib/services/header.service";
// this is correct
export { HeaderService } from "./lib/services/header.service";