Angular2没有服务提供者 - 外部模块

Posted 2023-03-13

【中文标题】Angular2没有服务提供者 - 外部模块

【英文标题】：Angular2 No provider for service - external module

【发布时间】：2017-07-21 22:22:53

【问题描述】：

我构建了一个 Angular Module，它拥有自己的服务和组件：

@NgModule(
  declarations: [ FileUploader],
  exports: [ FileUploader ],
  imports: [ CommonModule ],
  providers: [ FileService ],
)
export class FilesModule  

还有FileService：

import  Injectable  from '@angular/core';

@Injectable()
export class FileService

    constructor() 

    uploadFile(file): Promise 
        return new Promise((resolve, reject) => 
            ...
        
    

然后我将它导入到我的AppModule:

@NgModule(
  declarations: [ AppComponent ],
  entryComponents: [ AppComponent ],
  imports: [ FilesModule ]
)
export class AppModule  

当我将FileService 注入AppComponent 时，我得到一个错误：

AppComponent 中的错误：没有 FileService 的提供程序

来自 Angular 文档：

当我们导入一个模块时，Angular 会将模块的服务提供者（其提供者列表的内容）添加到应用程序根注入器。

这使得应用程序中知道提供程序查找令牌的每个类都可以看到提供程序。

我缺少什么来完成这项工作？

【问题讨论】：

你在 app.module.ts 中导入 FileService 吗？

【参考方案1】：

当提供者在我的NgModule 中发挥作用时，我总是创建一个ForRoot 方法：

@NgModule(
  declarations: [FileUploader],
  exports: [FileUploader],
  imports: [CommonModule]
)
export class FilesModule 

  static forRoot(): ModuleWithProviders 
    return 
      ngModule: FilesModule,
      providers: [
        FileService
      ]
    
  

然后您可以在 AppModule 中使用它：

@NgModule(
  declarations: [AppComponent],
  entryComponents: [AppComponent],
  imports: [FilesModule.forRoot()]
)
export class AppModule 

【讨论】：

我添加了forRoot 方法，但仍然报错

并且您在 AppModule 导入中添加了 forRoot()？

这正是我所做的

我从服务中删除了所有依赖项和功能 - 没有任何帮助

我创建了一个有效的plunkr。你能把你的版本和这个比较一下吗？看看有什么问题？或者自己创建一个 plunkr 来演示问题。可能是您没有使用正确的 IDE，在 AppComponent 的导入语句中导入 FileService 与 FilesService 之间可能存在差异

【参考方案2】：

我认为您尝试在 AppComponent 级别使用 FileService。如果您这样做，您应该将 FileService 添加到 AppModule 的提供程序或在 FileModule 级别使用 FileService。

您可能忘记了 FileService 中的 @Injectable() 注释

【讨论】：

我在FileModule 级别导入FileService，我没有忘记@Injectable()

就是这样！我有一个不同的文件仍在从AppModule 级别导入FileService - 我想知道为什么我得到AppComponent 中的错误 而不是那个文件。