Question

这是我在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 
...

Answer 1

很难从错误消息中分辨出哪个提供程序导致了此问题。我设法调试的方法如下：

我进入了 node_modules @ angular \ compiler \ bundles \ compiler.umd.js 文件
我在其中找到一行：“遇到未定义的提供程序！通常这意味着您具有循环依赖关系。这可能是由于使用'barrel'index.ts文件。”
在添加console.log('type', type);之前一行，以查看未定义的提供程序在哪个文件中（您也可以在其中控制台记录其他相关变量）。
在相关文件中，我找到了导致问题的“桶”导入，并用精确的文件路径导入替换了它。

Answer 2

一种可能性是尝试在同一文件中声明服务和模块，并在服务之前声明模块：

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

Answer 3

我尚无声望对https://stackoverflow.com/a/51304428/2549593进行评论但最好添加以下内容：

salt

它将显示提供程序列表和有问题的模块，因此您可以打开它，并检查此提供程序列表：标记为未定义的-应该修复

Answer 4

我在使用ng-packagr打包一个库然后将其导入另一个库时遇到了这个问题。最终成为我的问题的确实是'barrel'index.ts进口。

这让它坏了

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

在services文件夹中，我有一个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 ]})

Answer 5

在运行--prod时遇到此错误。

您不能导入类似的内容：

import { MyService } from '.';

您应该使用完整路径

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

Answer 6

检查模块是否可以找到您提到的服务。

就我而言，我是从guard文件夹中导出guards。该文件夹包含一个index.ts文件。此guards文件夹auth.guard.ts和company.guard.ts中还有两个文件。理想情况下，我应已将这些文件导出到索引中，如下所示：

guards / index.ts

的内容

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

但是我忘了在company.guard.ts导出的行上方加上一行。这是一个问题。

Answer 7

如果是离子

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

从app.module.ts中删除存储由于@ ionic / storage 2.x.x 我们导入IonicStorageModule而不是存储

Answer 8

对我来说，只是帮助重启了NG SERVE

Answer 9

我的 Angular project 使用 npm angular library 打包时出现错误：

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

这是因为在 public_api.ts 上定义别名

示例：

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

Answer 10

在我的情况下，

非常简单，在模块定义中实际上是未定义的提供程序。
由于我使用的库具有动态更改其提供程序的选项，并且配置错误，因此将undefined作为提供程序加载。

Answer 11

我通过平整所有桶的进口来解决这个问题（这虽然首先挫败了使用桶形锉的目的，但我不能为此浪费更多的时间）。

Answer 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再次起作用。

Answer 13

就我而言，我只是从服务中删除了@Injectable（）装饰器（因为它不需要注入任何服务）

Answer 14

有时会发生此问题，原因是在角度应用程序中使用的第三方api有某些依赖性。我遇到了同样的问题，并通过以下步骤解决了该问题：

删除了package.lock.json文件
已删除的node_modules文件夹
再次运行npm install
运行“ ng build --prod” 这些步骤将解决您的问题。

Answer 15

就我而言，我对此进行了更改

Message: Undefined property: CI_Loader::$numbertowords

Filename: Inventory/Bill_Print1.php

Line Number: 233

Backtrace:

File: C:\xampp\htdocs\Yuva3\application\views\Inventory\Bill_Print1.php
Line: 233
Function: _error_handler

File: C:\xampp\htdocs\Yuva3\application\controllers\TipUp_Loan.php
Line: 74
Function: view

File: C:\xampp\htdocs\Yuva3\index.php
Line: 315
Function: require_once


Fatal error: Call to a member function convert_number() on null in C:\xampp\htdocs\Yuva3\application\views\Inventory\Bill_Print1.php on line 233
A PHP Error was encountered
Severity: Error

Message: Call to a member function convert_number() on null

Filename: Inventory/Bill_Print1.php

Line Number: 233

Backtrace:

到

  @Injectable()
    export class LocationTracker {
    }

Answer 16

我还控制台在错误消息前的语句中记录了 node_modules \ @angular \ compiler \ bundles \ compiler.umd.js 文件。

并检查组件的提供者数组中是否存在 文档界面 ，这是根本原因。

我已将其删除以解决此问题。

Answer 17

当缺少针对角度类的重写的导入时，出现此错误。我想象不正确的导入也可能以其他方式导致错误。

在我的情况下，我没有用于File的import语句，它默认为File接口，这不是我想要的。添加import { File } from "@ionic-native/file"可以解决此问题。

错误：“遇到未定义的提供程序！通常这意味着您有一个循环依赖项”

17 个答案: