Сложность при импорте зависимостей в Angular2

Question

В основном я создал пример приложения, обратившись к учебнику по ускоренному запуску Angular2. Для дальнейшего копания я создал файл службы ./services/dataService.ts, как показано ниже.

import {Injectable} from 'angular2/core'; 
@Injectable() 
export class DataService { 
    items: Array<number>; 
    constructor() { 
     this.items = [1, 2, 3, 4]; 
    } 
    getItems() { 
     return this.items; 
    } 
} 

я имел "outDir": "../wwwroot/app", вариант, упомянутый в tsconfig, которые transpile app.ts & dataService.ts ниже пути.

--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) 

код компилируется с не-ошибки, но после применения Рану я ниже ошибки, http://localhost:8413/app/services/dataService.

Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найден)

я использовал ниже код из index.html для загрузки приложения файлов на стр.

System.config({ packages: { src: { defaultExtension: 'js' } } }); 
System.import('app/app.js').then(null, console.error.bind(console)); 

Мой вопрос, как я мог бы импортировать dataService.js, почему это дать сообщение об ошибке 404 еще его там в месте? Я много исследовал эту проблему, но не нашел ничего полезного. Любая помощь была бы оценена.

Редактировать

Добавлено .tsconfig непосредственно получить исправление, когда есть проблема

{ 
    "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

Проблема была с конфигурацией System, ранее у меня был ниже код для загрузки компонента.

System.config({ packages: { src: { defaultExtension: 'js' } } }); 
System.import('app/app.js').then(null, console.error.bind(console)); 

В основном System.config настройки говорит, что packages будет принадлежит src папки и файлы defaultExtension является js. Поэтому я поменял packagessrc на app, так как у меня была папка app, а не src.

Помимо этого, я изменил System.import('app/app.js') на System.import('app/app') по умолчанию для расширений файлов: js, поэтому мне не нужно беспокоиться об этом. Таким образом, сценарий загрузки компонентов изменился ниже.

System.config({ packages: { app: { defaultExtension: 'js' } } }); 
System.import('app/app').then(null, console.error.bind(console));