Injecting a service inside a service uncaught error

Question

I'm trying to inject a service inside another service:

• instagram.service > event.service.ts(main service) Where the instagram is the service that is going to be injected inside the event.service.

I have declared the instagram.service.ts in the app.module.

The error that I get is:

Uncaught Error: Can't resolve all parameters for Instagram: (?). at syntaxError (compiler.js:1021) at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:10922) at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getTypeMetadata (compiler.js:10815) at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getInjectableTypeMetadata (compiler.js:11037) at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getProviderMetadata (compiler.js:11046) at compiler.js:10984 at Array.forEach () at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getProvidersMetadata (compiler.js:10944) at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:10663) at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules (compiler.js:23876)

After running some tests I noticed that the error only happens when I import the Http component (that's also declared on the app.module).

Am I missing something here?

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

}

Answer 1

Have you imported HttpModule in your AppModule?

Keep in mind that with Angular 5 you could use HttpClient because Http is deprecated now. For more info see: https://angular.io/guide/http.

Answer 2

You need to add @Injectable()

to your Instagram service

Good lock!

Answer 3

In general, if you want to Inject anything, it has to have the @Injectable() annotation. That annotation basically flags the class for angular to track and provide to requesting classes.

Just to clarify a bit (looking at your comment it seems that it is not clear how Angular DI works): Classes that will be injected needs an @Injectable annotation Classes with requires an injected element do so by specifying an @Inject(InjectableClassName) argument in the constructor. These things apply to all classes.

There's a caveat though, which is probably what is confusing you: Classes already "registered" by angular by any means (meaning they have either @Injectable, @Component, @Pipe or @Directive annotation) have a shortcut for their constructor: they dont need the @Inject(..) argument, but that argument will be automatically resolved by indicating the type and an access keyword (just like you did, since EventService has @Injectable). This is only an "implicit" inject, angular will process it the same way.

I think it is important to say this because the type is only one of the possible "DI tokens". For instance I have in one of my project this constructor:

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

As you can see, the type of serviceMap is any, but I do inject it via a Dependency Token I provide in the containing module, and I can actually pass anything to it (which I use for different type of mocks and actual service which have no common API). As you can see, I also use the shortcut DI for the other service though.

Bear in mind, @Injectable doent mean its constructor can be injected. It means the class can be injected elsewhere. With your code, I can write somewhere constructor(private e: EventService) and Angular will inject me your eventservice (with the instagram service injected again). Injectables dont get other things injected to them, they do get injected in other things.