Dependency Injection Issue - Angular 2

Question

Momentan arbeite ich an Angular 2. Ich muss alle Funktionalitäten von Angular 2 demonstrieren. Ich stehe DI-Problem gegenüber. Dependency Injection funktioniert nicht.

Hier ist meine 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); 

Hier ist mein 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); 

Kann mir jemand erklären, was mit meinem Code falsch?

Ich möchte keine alternative Lösung verwenden, die ich oben geschrieben habe.

Answer 1

I-Lösung gefunden. Geringfügige Änderung in system.config.js Mit diesem

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

Answer 2

Sie haben vergessen, einen Anbieter für Ihren injizierbaren Service zu deklarieren. Fügen Sie die folgende Zeile entweder @Component oder @NgModule Dekorateur:

providers:[ListService]