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


undefined

9 Answers
9

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:

forwardRef

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

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


@Injectable()
export class FooService



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:

looking for $provider, $debugInfo

console.log(`looking for $provider, $debugInfo`);

ng build --prod

compiler.js

providers

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:

guard

guards

guards

auth.guard.ts

company.guard.ts

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.

company.guard.ts

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'


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.

File

import File from "@ionic-native/file"

I also console logged the value right before the error message statement in node_modules@angularcompilerbundlescompiler.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



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


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:

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.