Ошибка: "Обнаруженный поставщик undefined! Обычно это означает, что у вас есть круговые зависимости"

Вот несколько бесполезная ошибка, которую я получаю в моем приложении Angular/TypeScript. Пока кто-то не сделает сообщение об ошибке лучше, что мы можем сделать по этому поводу? Каковы наиболее вероятные ситуации, которые вызывают это?

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

ОТВЕТЫ

Ответ 1

Одна из возможностей заключается в попытке объявить службу и модуль в том же файле и объявить модуль перед службой:

import {Injectable, NgModule} from '@angular/core';

@NgModule({providers: [FooService]}) // WRONG: used before declared
export class FooModule {
}

@Injectable()
export class FooService {
}

Вы можете исправить это, сначала объявив службу, или вы можете использовать forwardRef следующим образом:

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

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

@Injectable()
export class FooService {
}

Ответ 2

По сообщению об ошибке очень трудно определить, какой поставщик вызывает эту проблему. Мне удалось отладить это следующим образом:

  • Я пошел в файл node_modules @angular\compiler\bundles\compiler.umd.js
  • Я нашел строку, где написано: "Обнаружен неопределенный поставщик! Обычно это означает, что у вас есть циклические зависимости. Это может быть вызвано использованием файлов" баррель "index.ts".
  • За одну строку до того, как я добавил console.log('type', type); чтобы увидеть, в каком файле находится неопределенный провайдер (вы также можете консоль записывать в него другие соответствующие переменные).
  • В соответствующем файле я нашел импорт "бочка", который вызвал проблему, и заменил его точным импортом пути к файлу.

Ответ 3

Я столкнулся с этим, используя ng-packagr для упаковки библиотеки, а затем импортируя ее в другую библиотеку. То, что в конечном итоге стало моей проблемой, действительно было "баррельным" индексом.

Это делало это

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

где в папке служб у меня был один файл index.ts, который экспортировал все службы.

Это исправило это:

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

Ответ 4

Получил эту ошибку при запуске --prod.

Вы не можете импортировать такие вещи:

import { MyService } from '.';

Вы должны использовать полный путь

import { MyService } from './my.service'

Ответ 5

Проверьте, может ли модуль найти указанную вами услугу.

В моем случае я экспортировал guard из папки guards. эта папка содержала файл index.ts. Были еще два файла в этом guards папку auth.guard.ts и company.guard.ts. В идеале я должен был экспортировать эти файлы в индекс следующим образом:

содержимое стражи /index.ts

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

Но я забыл включить строку выше, которая экспортирует из company.guard.ts. Это создавало проблему.

Ответ 6

Для меня просто помог перезапустить NG SERVE

Ответ 7

Я получил эту ошибку, когда пропустил импорт для переопределения углового класса. Я предполагаю, что неправильный импорт может вызвать ошибку и другими способами.

В моем случае у меня не было оператора import для File и по умолчанию использовался интерфейс File, что было не тем, что я хотел. Добавление import { File } from "@ionic-native/file" решило проблему.

Ответ 8

Я также консольно зарегистрировал значение прямо перед сообщением об ошибке в файле node_modules\@angular\compiler\bundles\compiler.umd.js.

И проверил, что интерфейс Document был там в массиве провайдеров компонента, который был основной причиной.

Я удалил это, чтобы исправить эту проблему.

Ответ 9

в моем случае я изменяю это

  @Injectable()
    export class LocationTracker {
    }

в

  @Injectable()
    export class LocationTrackerProvider {
    }

Ответ 10

Иногда эта проблема возникала из-за некоторой зависимости в сторонних API, используемых в угловых приложениях. Я столкнулся с той же проблемой и решил ее, используя следующие шаги:

  1. Удален файл package.lock.json
  2. Удаленная папка node_modules
  3. Снова запустите npm install
  4. Запустите "ng build --prod". Эти шаги решат вашу проблему.

Ответ 11

в моем случае я просто удалил декоратор @Injectable() из моего сервиса (потому что в него не нужно было добавлять сервисы)

Ответ 12

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

Я только добавил Location, { provide: HashLocationStrategy, useClass: HashLocationStrategy } в качестве поставщика в одном из моих компонентов и не сделал никаких других необходимых изменений в файлах, таких как app.module.ts. Мне это больше не нужно, поэтому я просто удаляю это. И команда ng build -c deploy --build-optimizer --aot --prod --sourceMap снова работает.