Angular 2 service dependency injection fails (using angular-cli and $ng serve)

Question

I'm using a dependency injection in Angular 2 to inject a service to a component. Here's the code:

./app/source-display/source-display.component.ts:

import { Component, OnInit } from '@angular/core';
import { CatalogService } from '../catalog.service';


@Component({
  moduleId: module.id,
  selector: 'app-source-display',
  providers: [CatalogService],
  templateUrl: 'source-display.component.html',
  styleUrls: ['source-display.component.css']
})
export class SourceDisplayComponent implements OnInit {
  active_source_id: number;
  sources: any;

  constructor(catalogService: CatalogService) {
      this.active_source_id = 1;
      this.sources = catalogService.getCatalog();
  }

  ngOnInit() {
    //   active_source_id = 0;
  }

}

./app/catalog.service.ts:

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

@Injectable()
export class CatalogService {

  constructor() {}

  getCatalog() {
      return {
          0: {name: 'Source 0'},
          1: {name: 'Source 1'},
      }
  }

}

I'm also putting my CatalogService in the boostrap function in my main.ts file.

Here is the error message I get from running ng serve in the command line (from angular-cli):

The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
  C:/Users/arjun_000/github/slippy-astro-images/ng2-catdisplay/tmp/broccoli_type_script_compiler-input_base_path-soAy8zVZ.tmp/0/src/app/source-display/source-display.component.spec.ts (10, 21): Supplied parameters do not match any signature of call target.
  C:/Users/arjun_000/github/slippy-astro-images/ng2-catdisplay/tmp/broccoli_type_script_compiler-input_base_path-soAy8zVZ.tmp/0/src/app/source-display/source-display.component.ts (18, 12): Property '_catalogService' does not exist on type 'SourceDisplayComponent'.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:120:19)
    at BroccoliTypeScriptCompiler.build (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:43:10)
    at C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:152:21
    at lib$rsvp$$internal$$tryCatch (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1198:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

The broccoli plugin was instantiated at:
    at BroccoliTypeScriptCompiler.Plugin (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\broccoli-plugin\index.js:10:31)
    at BroccoliTypeScriptCompiler.CachingWriter [as constructor] (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:21:10)
    at BroccoliTypeScriptCompiler (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:27:5)
    at Angular2App._getTsTree (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\lib\broccoli\angular2-app.js:331:18)
    at Angular2App._buildTree (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\lib\broccoli\angular2-app.js:124:23)
    at new Angular2App (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\lib\broccoli\angular2-app.js:53:23)
    at module.exports (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\angular-cli-build.js:10:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\angular-cli\lib\models\builder.js:55:19)
    at Class.module.exports.Task.extend.init (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\angular-cli\lib\models\builder.js:89:10)
    at new Class (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\core-object\core-object.js:18:12)
    at Class.module.exports.Task.extend.run (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\angular-cli\lib\tasks\serve.js:15:19)
    at C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\angular-cli\lib\commands\serve.js:64:24
    at lib$rsvp$$internal$$tryCatch (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (C:\Users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\rsvp\dist\rsvp.js:1198:9)

I've noticed something strange: The code doesn't work as is, but if I comment out this section from the component --

  constructor(catalogService: CatalogService) {
      this.active_source_id = 1;
      this.sources = catalogService.getCatalog();
  }

-- and then run ng serve (which builds the app successfully), and then un-comment out the section, the app now refreshes works the way I want it to.

I'm not sure what I have to do to solve this. Any ideas? Is there a problem with my dependency injection itself or is there some other issue with just its use with this angular-cli command ng serve?

Bhushan Gadekar · Accepted Answer · 2016-07-21 19:49:01Z

2

There are two errors in your code:

source-display.component.spec.ts :

Arguments in your this file are not valid, so i will suggest you to comment all the code in this file.

source-display.component.ts:

You are injecting service in a wrong way, ideal syntax should be:

constructor(private catalogService: CatalogService) {
   this.active_source_id = 1;
   this.sources = this.catalogService.getCatalog();
}

declaring constructor(private catalogService: CatalogService) is equivalent to:

export class SourceDisplayComponent {
    private catalogService;

    constructor(catalogService: CatalogService) {
      this.catalogService=catalogService; //initialising instance variable with dynamically injected instance
    }

}

Hope this helps.

answered Jul 21, 2016 at 19:49

Bhushan Gadekar

13.8k21 gold badges89 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arjun Over a year ago

Commenting out source-display.component.spec.ts made it work for me! If I keep it commented out, am I really losing anything in terms of the app's functionality? Or are the .spec.ts files just for tests etc.? And I've also fixed my constructor, thanks for the insight.

Bhushan Gadekar Over a year ago

@Arjun spec.ts files are the configured test cases for angular-cli. if you get familiar with these test cases, then it will be easy for you to edit them. for development. You are not losing your apps functionality.

Collectives™ on Stack Overflow

Angular 2 service dependency injection fails (using angular-cli and $ng serve)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related