Not able to inject Dependency Injection in angular4

Question

i have a following class like this

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

@Injectable()
export class moviindustry {
    constructor(private music:musicindustry) { }
    producer() {
        this.music.album();     
        alert('moviindustry producer');
    }
    directort() {
        alert('moviindustry directort');
    }
    crew() {
        alert('moviindustry crew');
    }
}


export class musicindustry {
    album() {
        alert('album')
    }
}

and i have registered the class in the NgModule like this

@NgModule({
  declarations: [
    AppComponent,
    ComponentAComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [  
    moviindustry,
    musicindustry
  ],  
  bootstrap: [AppComponent]
})
export class AppModule { }

now when i try to access the class like this

export class AppComponent {   
  constructor(private movies:moviindustry){
    this.movies.producer();    
  }
}

i am getting the following error

Uncaught Error: Can't resolve all parameters for moviindustry: (?). at syntaxError (compiler.es5.js:1694)

as per the documentation, Injectable() is used to inject dependency injection for the class, then why am i not able to use it? ironically, my app gets compiled when i use the http in the constructor, can someone help me to understand this

NOTE:

i am not able to use like this either

constructor(@Inject(musicindustry) private music:musicindustry) { }

Why don't you add `@Injectable()` to `musicindustry` class. Its the best practice even though you don't require it — Amit Chigadani, Nov 29 '18 at 15:10
Well, try moving `musicindustry` class at the top of your file. i.e before `moviindustry`. — Amit Chigadani, Nov 29 '18 at 15:13

score 3 · Answer 1 · answered Nov 29 '18 at 15:18

There's some serious issue with your code. It's not at all according to the Angular Style Guide.

It breaks a lot of rules in there like Single Responsibility Principal; the name of the Service Class should be in UpperCamelCase etc.

Here's how you can refactor the code appropriately to make it work:

Create two different files for both the services:

Movie Service:

import { Injectable } from '@angular/core';
import { MusicService } from './music.service';

@Injectable()
export class MovieService {

  constructor(private music: MusicService) { }

  producer() {
    this.music.album();
    alert('moviindustry producer');
  }

  directort() {
    alert('moviindustry directort');
  }

  crew() {
    alert('moviindustry crew');
  }

}

Music Service:

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

@Injectable()
export class MusicService {

  album() {
    alert('album')
  }

}

Here's a Working Sample StackBlitz for your ref.

score 1 · Accepted Answer · answered Nov 29 '18 at 15:25

Move musicindustry class above moviindustry class, so that dependencies for moviindustry class are solved better. Also it is ideal to add @Injectable() decorator for providers even when you don't have DI's.

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

@Injectable()
export class musicindustry {
    album() {
        alert('album')
    }
}

@Injectable()
export class moviindustry {
    constructor(private music:musicindustry) { }
    producer() {
        this.music.album();     
        alert('moviindustry producer');
    }
    directort() {
        alert('moviindustry directort');
    }
    crew() {
        alert('moviindustry crew');
    }
}

Not able to inject Dependency Injection in angular4

2 Answers2