CODEWITHSUNDEEP
angulartypescript
Alexander Taylor
Alexander Taylor

Reputation: 17632

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

Upvotes: 69

Views: 83375

Answers (17)

Moslem Shahsavan
Moslem Shahsavan

Reputation: 1337

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";

Upvotes: 0

V&#225;clav Mikeska
V&#225;clav Mikeska

Reputation: 507

For me, I just restart the ng serve

Upvotes: 24

Jestin
Jestin

Reputation: 598

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

Upvotes: 1

Andrew Spoda
Andrew Spoda

Reputation: 83

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

Upvotes: 7

ya_dimon
ya_dimon

Reputation: 3812

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.

Upvotes: 0

Wildhammer
Wildhammer

Reputation: 2175

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

Upvotes: 0

heinels
heinels

Reputation: 187

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

Upvotes: 0

Sadra Rahmani
Sadra Rahmani

Reputation: 125

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

Upvotes: 1

Ophir Bushinsky
Ophir Bushinsky

Reputation: 1429

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.

Upvotes: 75

Nivedita
Nivedita

Reputation: 21

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.

Upvotes: 2

Zachary Hale
Zachary Hale

Reputation: 91

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

Upvotes: 5

bhaghyasandar
bhaghyasandar

Reputation: 516

in my case i changes this 

  @Injectable()
    export class LocationTracker {
    }

to

  @Injectable()
    export class LocationTrackerProvider {
    }

Upvotes: 1

Jaime Yule
Jaime Yule

Reputation: 1081

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'

Upvotes: 2

Simran kaur
Simran kaur

Reputation: 378

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.

Upvotes: 1

Stan Kurdziel
Stan Kurdziel

Reputation: 5724

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.

Upvotes: 0

Ramesh Pareek
Ramesh Pareek

Reputation: 1669

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.

Upvotes: 1

Alexander Taylor
Alexander Taylor

Reputation: 17632

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

Upvotes: 22

Related Questions