在服务未捕获错误中注入服务答案

【问题标题】：Injecting a service inside a service uncaught error在服务未捕获错误中注入服务
【发布时间】：2018-12-19 12:11:00
【问题描述】：

我正在尝试在另一个服务中注入一个服务：

instagram.service > event.service.ts(主要服务) instagram 是要在 event.service 中注入的服务。

我已经在 app.module 中声明了 instagram.service.ts。

我得到的错误是：

未捕获的错误：无法解析 Instagram 的所有参数：(?)。在 syntaxError (compiler.js:1021) 在 CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:10922) 在 CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:10815) 在 CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getInjectableTypeMetadata (compiler.js:11037) 在 CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getProviderMetadata (compiler.js:11046) 在 compiler.js:10984 在 Array.forEach () 在 CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getProvidersMetadata (compiler.js:10944) 在 CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:10663) 在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:23876)

在运行了一些测试后，我注意到该错误仅在我导入 Http 组件（该组件也在 app.module 中声明）时发生。

我错过了什么吗？

events.service.ts

import { Injectable } from '@angular/core';
import { AngularFireStorage } from '@angular/fire/storage';
import { Event } from './events.model';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { Instagram } from './instagram.service';

@Injectable()

export class EventService {
    event: AngularFireList<Event[]>;
    NODE = 'events/';

    constructor(private instagram: Instagram, private db: AngularFireDatabase, private storage: AngularFireStorage) {}

    getAllPictures(tag: string) {
        this.instagram.getAllPictures(tag);
    }
}

instagram.service.ts

import { Http } from '@angular/http';
export class Instagram {
    tag: string;
    private BASE_URL = 'https://www.instagram.com/explore/tags/' + this.tag + '/?__a=1';
    constructor(public http: Http) {}

    getAllPictures(tag: string) {
        this.tag = tag;
        return this.http.get(this.BASE_URL).pipe().subscribe(
            data => {
                console.log(data);
            },
            (error) => {
                console.log(error);
            }
        );
    }

}

【问题讨论】：

尝试使用 HttpClient 代替 http
嘿@bat7 我试过了，但仍然遇到同样的错误。 ://

标签： angular typescript angular-services

【解决方案1】：

您需要添加@Injectable()

致您的Instagram 服务

锁好！

【讨论】：

成功了！哇！非常感谢！我认为 @Injectable() 只是添加到类中，这样会注入另一个东西。非常感谢！

【解决方案2】：

您是否在您的AppModule 中导入了HttpModule？

请记住，对于 Angular 5，您可以使用 HttpClient，因为 Http 现在已被弃用。欲了解更多信息，请参阅：https://angular.io/guide/http。

【讨论】：

嘿@Георги Стоименов 我遵循了这个建议，但我仍然得到同样的错误。还有什么我可以尝试的吗？谢谢
嗯.. 我们需要更多信息。尝试在这里复制它：stackblitz.com/edit/angular-entmfb 并与我们分享。 @bat7 也有一点关于您的 Instagram 服务中缺少的 @Injectable()。
就是这样。非常感谢您的帮助！

【解决方案3】：

一般来说，如果你想注入任何东西，它必须有@Injectable() 注释。该注释基本上将类标记为 Angular 以跟踪并提供给请求类。

只是为了澄清一点（看你的评论似乎不清楚 Angular DI 是如何工作的）：将被注入的类需要一个 @Injectable 注释需要注入元素的类通过在构造函数中指定 @Inject(InjectableClassName) 参数来实现。这些东西适用于所有类。

不过有一个警告，这可能会让您感到困惑：已经以任何方式通过角度“注册”的类（意味着它们具有@Injectable、@Component、@Pipe 或 @Directive 注释）具有构造函数的快捷方式：它们不需要 @Inject(..) 参数，但该参数将通过指示类型和访问关键字来自动解析（就像您所做的那样，因为 EventService 具有@Injectable）。这只是一个“隐式”注入，Angular 会以同样的方式处理它。

我认为这样说很重要，因为类型只是可能的“DI 标记”之一。例如，我在我的一个项目中有这个构造函数：

    constructor(private eventService: EventService, @Inject(SERVICE_IMPLEMENTATIONS_MAP) private serviceMap: any) {}

如您所见，serviceMap 的类型是 any，但我确实通过在包含模块中提供的 Dependency Token 注入它，我实际上可以将任何东西传递给它（我用于不同类型的模拟和实际没有通用 API 的服务）。正如你所看到的，我也将快捷方式 DI 用于其他服务。

请记住，@Injectable 确实意味着它的构造函数可以被注入。这意味着该类可以在其他地方注入。使用您的代码，我可以在某处编写构造函数（私有 e：EventService），Angular 将向我注入您的事件服务（再次注入 instagram 服务）。 Injectables 不会将其他东西注入它们，它们会被注入其他东西。

【讨论】：