Angular 2 서비스 종속성 주입이 실패합니다 (Angle-cli 및 $ ng 서비스 사용)

Question

저는 Angular 2로 종속성 주입을 사용하여 구성 요소에 서비스를 주입합니다.

./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'}, 
     } 
    } 

} 

나는 또한 가져온 거에요 내 CatalogService 내 main.ts 파일의 부트 스트랩 기능입니다.

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) 

나는 이상한 뭔가를 발견했습니다 : 여기

내가 ( angular-cli에서) 명령 줄에서 ng serve을 실행 얻을 오류 메시지입니다 코드는 그대로 작동하지 않습니다,하지만 난 언급하는 경우

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

- -이 구성 요소에서 섹션에서 다음 (성공적으로 응용 프로그램을 빌드하는) ng serve를 실행 한 다음 섹션을 해제 주석, 지금은 새로 고침 앱에서 내가 원하는 방식으로 작동합니다.

나는 이것을 해결하기 위해 무엇을해야하는지 잘 모르겠다. 어떤 아이디어? 종속성 삽입 자체에 문제가 있습니까? 아니면이 각도 -cli 명령을 사용하여 다른 문제가 있습니까? ng serve?

Answer 1

코드에서 두 가지 오류가 있습니다

1. 소스 display.component.spec.ts : 당신이 파일의

   인수가 유효하지 않은, 그래서 내가 당신을 제안합니다 이 파일에있는 모든 코드를 주석 처리하십시오.

2. 소스 display.component.ts :

   이 당신은 잘못된 방법으로 서비스를 주입하는

   은, 이상적인 구문은 다음과 같아야합니다

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

이 constructor(private catalogService: CatalogService) 선언을하는 것과 같습니다

export class SourceDisplayComponent { 
    private catalogService; 

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

} 

희망 사항 도움이됩니다.