종속성 주입 문제 - 각도 2

현재 Angular 2에서 작업 중입니다. Angular 2에서 제공하는 모든 기능에 대한 데모를 만들어야합니다. DI 문제에 직면하고 있습니다. 의존성 주입이 작동하지 않습니다.종속성 주입 문제 - 각도 2

은 여기 내 system.config.js

(function (global) { 


var map = { 

    '@angular': '/node_modules/@angular', // sufficient if we didn't pin the version 
    '@service': '/scripts/app.service', 
    '@component': '/scripts/app.component', 
    '@angular/router': '/node_modules/@angular/router', 
    '@angular/forms': '/node_modules/@angular/forms', 
    'angular2-in-memory-web-api': '/node_modules/angular2-in-memory-web-api', // get latest 
    'rxjs': '/node_modules/rxjs', 
    'ts': 'https://npmcdn.com/[email protected]/lib/plugin.js', 
    'typescript': '/node_modules/typescript/lib/typescript.js', 
    //'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api', // get latest 
    //'rxjs': 'https://npmcdn.com/[email protected]', 
    //'ts': 'https://npmcdn.com/[email protected]/lib/plugin.js', 
    //'typescript': 'https://npmcdn.com/[email protected]/lib/typescript.js', 
}; 


var packages = { 
    '@service': { defaultExtension: 'ts' }, 
    '@component': { defaultExtension: 'ts' }, 
    'rxjs': { defaultExtension: 'js' }, 
    'angular2-in-memory-web-api': {main: 'index.js', defaultExtension: 'js'}, 
}; 

var ngPackageNames = [ 
    'common', 
    'compiler', 
    'core', 
    'http', 
    'platform-browser', 
    'platform-browser-dynamic', 
    'router-deprecated', 
    'upgrade', 
]; 


ngPackageNames.forEach(function (pkgName) { 
    map['@angular/' + pkgName] = '/node_modules/@angular/' + pkgName; 
}); 


ngPackageNames.forEach(function (pkgName) { 


    packages['@angular/' + pkgName] = {main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js'}; 

    // Individual files (~300 requests): 
    //packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
}); 


packages['@angular/router'] = {main: 'index.js', defaultExtension: 'js'}; 


packages['@angular/forms'] = {main: 'index.js', defaultExtension: 'js'}; 

var config = { 

    transpiler: 'ts', 
    typescriptOptions: { 
     tsconfig: false 
    }, 
    meta: { 
     'typescript': { 
      "exports": "ts" 
     } 
    }, 
    map: map, 
    packages: packages 
}; 

document.SYSTEMJS_CONFIG = config;})(this);

내 app.ts이

이

import {Component} from "@angular/core"; 
import {NgModule} from "@angular/core"; 
import {HttpModule} from "@angular/http"; 
import {platformBrowserDynamic} from "@angular/platform-browser-dynamic"; 
import {BrowserModule} from "@angular/platform-browser"; 
//import {MyList} from "@component/list.component"; 
import 'rxjs/Rx'; 
import {ListService} from "@service/list.service"; 

@Component({ 
    selector:'app-list', 
    templateUrl: 'htmls/app.list.html' 
}) 

export class AppList { 

//list = []; 
//constructor(private listService: ListService) { <--- This is not working 
// //this.list = listService.GetList(); 
//} 


// Alternate solution I found 
listService: ListService; 
list = []; 

    constructor() { 
    this.listService = new ListService(); 
    this.list = this.listService.GetList(); 
    } 
} 


@NgModule({ 
    declarations: [AppList], 
    imports: [BrowserModule, HttpModule], 
    bootstrap: [AppList], 
    providers: [ListService] 
    }) 
export class AppModule { 
    } 

    platformBrowserDynamic().bootstrapModule(AppModule);

가

사람이 내 코드에 어떤 문제가 있는지 설명 할 수있다인가?

위의 다른 해결책을 사용하고 싶지 않습니다.

출처

2016-09-14 Parshwa Shah

무엇을 "정확하게 평균 작동하지 않는 경우"를 사용? –

이 오류가 발생합니다. "오류 : 오류 : AppList의 모든 매개 변수를 해결할 수 없습니다 : (?). (...)" –

"AppModule"및 "AppList"구성 요소의 순서를 변경해야합니다. 'App.ts'에'AppList' 위에'AppModule' 정의를 넣으십시오 – ranakrunal9

내가 해결책을 발견했다. system.config.js의 사소한 변화가 이

transpiler: 'typescript', 
    typescriptOptions: { 
     emitDecoratorMetadata: true 
    },

출처

2016-09-14 09:39:15

주사 할 수있는 서비스 제공자를 선언하는 것을 잊었습니다. @Component 또는 @NgModule 데코레이터 중 하나에 다음 줄을 추가

providers:[ListService]

출처

2016-09-14 09:04:38

@NgModule 데코레이터에서 이미 선언했습니다. –

종속성 주입 문제 - 각도 2

답변

관련 문제