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


i'm using dependency injection in angular 2 inject service component. here's code:

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

import { component, oninit } '@angular/core'; import { catalogservice } '../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 } '@angular/core';  @injectable() export class catalogservice {    constructor() {}    getcatalog() {       return {           0: {name: 'source 0'},           1: {name: 'source 1'},       }   }  }


i'm putting catalogservice in boostrap function in main.ts file.

here error message running ng serve in command line (from angular-cli):

the broccoli plugin: [broccolitypescriptcompiler] failed with: error: typescript found 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 not match 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' not exist on type 'sourcedisplaycomponent'.     @ broccolitypescriptcompiler._doincrementalbuild (c:\users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:120:19)     @ broccolitypescriptcompiler.build (c:\users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:43:10)     @ c:\users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\broccoli-caching-writer\index.js:152:21     @ 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)     @ 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)     @ 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)     @ 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)     @ _combinedtickcallback (internal/process/next_tick.js:67:7)     @ process._tickcallback (internal/process/next_tick.js:98:9)  broccoli plugin instantiated 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)     @ 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)     @ broccolitypescriptcompiler (c:\users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\lib\broccoli\broccoli-typescript.js:27:5)     @ angular2app._gettstree (c:\users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\lib\broccoli\angular2-app.js:331:18)     @ angular2app._buildtree (c:\users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\lib\broccoli\angular2-app.js:124:23)     @ new angular2app (c:\users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\lib\broccoli\angular2-app.js:53:23)     @ module.exports (c:\users\arjun_000\github\slippy-astro-images\ng2-catdisplay\angular-cli-build.js:10:10)     @ 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)     @ 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)     @ 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)     @ 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)     @ c:\users\arjun_000\github\slippy-astro-images\ng2-catdisplay\node_modules\angular-cli\node_modules\angular-cli\lib\commands\serve.js:64:24     @ 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)     @ 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)     @ 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)     @ 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 strange: code doesn't work is, if comment out section component --

  constructor(catalogservice: catalogservice) {       this.active_source_id = 1;       this.sources = catalogservice.getcatalog();   }

-- , run ng serve (which builds app successfully), , un-comment out section, app refreshes works way want to.

i'm not sure have solve this. ideas? there problem dependency injection or there other issue use angular-cli command ng serve?

there 2 errors in code:

  1. source-display.component.spec.ts :

    arguments in file not valid, suggest comment code in file.

  2. source-display.component.ts:

    you injecting service in 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) equivalent to:

export class sourcedisplaycomponent {     private catalogservice;      constructor(catalogservice: catalogservice) {       this.catalogservice=catalogservice; //initialising instance variable dynamically injected instance     }  }

hope helps.


Comments

Post a Comment