Dependency Injection issue - Angular 2

Question

Currently, I am working on Angular 2. I have to make demo of all functionalities provided by Angular 2. I am facing DI issue.Dependency Injection is not working.

Here is my 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);

Here is my 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);

Can anyone explain what is wrong with my code?

I don't want to use alternate solution which I have written above.

Answer 1

I found solution. Minor change in system.config.js Use this

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

Answer 2

You forgot to declare a provider for your injectable service. Add the following line to either @Component or @NgModule decorator:

providers:[ListService]