Facing difficulty while importing dependency in Angular2 - angularjs

Question

Basically I have created a sample application by referring to Angular2 quickstart tutorial. For further digging I've created ./services/dataService.ts service file like below.
import {Injectable} from 'angular2/core';
#Injectable()
export class DataService {
items: Array<number>;
constructor() {
this.items = [1, 2, 3, 4];
}
getItems() {
return this.items;
}
}
I had "outDir": "../wwwroot/app", option mentioned in tsconfig which transpile app.ts & dataService.ts to below path.
--wwwroot
|app
|--app.js
|--services
|-- dataService.js
MyAppComponent
import {Component, View, Inject, forwardRef} from 'angular2/core';
import {NgFor} from 'angular2/common';
import {bootstrap} from 'angular2/platform/browser';
import {DataService} from './services/dataService';
#Component({
'selector': 'my-app',
template: `
<div *ngFor="#item of items">
{{item}}
</div>
`,
directives: [NgFor],
providers: [DataService]
})
export class MyAppComponent {
items: Array<number>;
constructor(service: DataService) {
this.items = service.getItems();
}
}
bootstrap(MyAppComponent)
Code gets compiled with no-error, but after application Ran I got
below error, http://localhost:8413/app/services/dataService.
Failed to load resource: the server responded with a status of 404 (Not Found)
I used below code from index.html to load app files on page.
System.config({ packages: { src: { defaultExtension: 'js' } } });
System.import('app/app.js').then(null, console.error.bind(console));
My question is how could I import the dataService.js, why does is give 404 error still its there in a place? I Researched alot on this problem, but didn't find anything helpful. Any help would appreciated.
Edit
Added .tsconfig to directly get rectify when there is issue
{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"module": "commonjs",
"removeComments": false,
"sourceMap": true,
"target": "es5",
"outDir": "../wwwroot/app",
"experimentalDecorators": true,
"emitDecoratorMetadata": true
},
"exclude": [
"node_modules",
"wwwroot"
]
}

Answer 1

The problem was with configuration of System, previously I was having below code to load component.
System.config({ packages: { src: { defaultExtension: 'js' } } });
System.import('app/app.js').then(null, console.error.bind(console));
Basically System.config settings tells that packages would be belongs to src folder and the files defaultExtension is js. So I changed my packages's src to app as I was having app folder, not src.
Other than that I changed System.import('app/app.js') to System.import('app/app') as default extensions of files is js, so I don't need to bother about it. So my component loading script changed to below.
System.config({ packages: { app: { defaultExtension: 'js' } } });
System.import('app/app').then(null, console.error.bind(console));