Angular 2 - 404提供程序問題

Question

我在嘗試在Angular 2應用程序中添加提供程序時遇到問題。我正在嘗試一些我在網上找到的解決方案，但我無法弄清楚我的應用正在發生什麼。

基本上，我發現了問題，當我將提供程序添加到我的代碼：

• GET http://localhost:3000/dist/services/performances.service 404（未找到）
• 錯誤：（SystemJS）XHR錯誤（404未找到）裝載http://localhost:3000/dist/services/performances.service （...）

注：我已經檢查的路徑是確定和視覺代碼不提供我任何錯誤。

在下面的圖片中，你可以看到我的應用程序的輸出。

應用輸出

我想補充的服務：（performances.service.ts）

import {Injectable} from '@angular/core'; 
import {Performance} from '../common/performance'; 
import {PERFORMANCES} from '../data/data-performances'; 

@Injectable() 
export class PerformancesService { 
    private performances : any; 

    contructor(){ 
     this.performances = {}; 
    } 

    getData(){ 
     return this.performances = PERFORMANCES; 
    } 
} 

我app.component.ts

import {Component} from '@angular/core'; 
import {PerformancesService} from '../services/performances.service'; 

@Component({ 
    selector : 'my-app', 
    template: 
    ` 
    <header-fund-centre></header-fund-centre> 
    <div class="container"> 
     <router-outlet></router-outlet> 
    </div> 
    `, 
    providers: [PerformancesService] 
}) 

export class AppComponent { } 

systemjs。 config.js

(function (global) { 
    System.config({ 
    paths: { 
     'npm:': 'node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     app: 'app', 
     // angular bundles 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 
     // other libraries 
     'rxjs':      'npm:rxjs', 
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 
     // Styling 
     '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js', 
    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
     main: '../dist/main.js', 
     defaultExtension: 'js' 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     }, 
     'angular-in-memory-web-api': { 
     main: './index.js', 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this); 

任何想法我做錯了有這個問題添加一個基本的提供者？謝謝！

編輯

下面你可以看到我目前使用

"dependencies": { 
    "@angular/common": "~2.1.1", 
    "@angular/compiler": "~2.1.1", 
    "@angular/core": "~2.1.1", 
    "@angular/forms": "~2.1.1", 
    "@angular/http": "~2.1.1", 
    "@angular/platform-browser": "~2.1.1", 
    "@angular/platform-browser-dynamic": "~2.1.1", 
    "@angular/router": "~3.1.1", 
    "@angular/upgrade": "~2.1.1", 
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.14", 
    "angular-in-memory-web-api": "~0.1.13", 
    "bootstrap": "^3.3.7", 
    "core-js": "^2.4.1", 
    "reflect-metadata": "^0.1.8", 
    "rxjs": "5.0.0-beta.12", 
    "systemjs": "0.19.39", 
    "zone.js": "^0.6.25" 
    }, 
    "devDependencies": { 
    "@types/core-js": "^0.9.34", 
    "@types/node": "^6.0.45", 
    "concurrently": "^3.0.0", 
    "lite-server": "^2.2.2", 
    "typescript": "^2.0.3" 
    } 

Answer 1

第一件事，所有的依賴關係，我不能看到你的文件夾中的文件.ts，請確保您的performances.service.ts存在在services文件夾中。

更改地圖的map以下

map: { 
    // our app is within the app folder 
    app: 'dist', //<-- changed from 'app' to 'dist 
    ... 
} 

您packages選項更改爲下面，說dist是包

packages: { 
    dist: { 
    main: 'main.js', //<-- change here, just used shorthand 
    defaultExtension: 'js' 
    }, 
    ... 
} 

添加PerformancesService到NgModuleproviders選項，這樣DI系統將識別的依賴，同時創建它的實例。

providers: [ PerformancesService ]