依存性注入問題 - 角度2

Question

現在、私は角度2で作業しています。角度2で提供されるすべての機能のデモを行う必要があります。DI問題に直面しています。依存性注入は機能しません。ここで

は、ここに私の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/plugin-typescript@4.0.10/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/rxjs@5.0.0-beta.6', 
    //'ts': 'https://npmcdn.com/plugin-typescript@4.0.10/lib/plugin.js', 
    //'typescript': 'https://npmcdn.com/typescript@1.9.0-dev.20160409/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); 

で誰もが私のコードが間違っているかを説明することはできますか？

上記の代替ソリューションを使用したくないです。

Answer 1

：@Componentまたは@NgModuleデコレータのいずれかに次の行を追加します。 system.config.jsのマイナーチェンジ これを使用

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

Answer 2

注射可能なサービスのプロバイダを宣言するのを忘れてしまった。私は解決策を見つけた

providers:[ListService]