Angular2自定義服務未找到

我正嘗試使用自定義服務來填充HTML列表中的人員列表。我創建了定製服務按如下：Angular2自定義服務未找到

app.peopleListService.ts

import { Injectable } from '@angular/core'; 
import { Person } from "../model/peopleModel"; 


@Injectable() 
export class PeopleService { 
    constructor() { } 

    getAll() : Person[] { 
    return [ 
     {name: 'Luke Skywalker', height: 177, weight: 70}, 
     {name: 'Darth Vader', height: 200, weight: 100}, 
     {name: 'Han Solo', height: 185, weight: 85}, 
    ]; 
    } 
}

我已經在我的module.ts註冊這個提供

import {NgModule}  from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {AppComponent} from './app.component'; 
import { PeopleService } from "../services/app.peopleListService"; 
@NgModule({ 
    imports:  [BrowserModule], 
    declarations: [AppComponent], 
    bootstrap: [AppComponent], 
    providers: [ PeopleService] 
}) 
export class AppModule { }

的package.json

{ 
    "name": "angular-demo", 
    "version": "1.0.0", 
    "scripts": { 
    "start": "tsc -w" 
    }, 
    "dependencies": { 
    "@angular/common": "~2.3.0", 
    "@angular/compiler": "~2.3.0", 
    "@angular/core": "~2.3.0", 
    "@angular/forms": "~2.3.0", 
    "@angular/http": "~2.3.0", 
    "@angular/platform-browser": "~2.3.0", 
    "@angular/platform-browser-dynamic": "~2.3.0", 
    "@angular/router": "~3.3.0", 
    "angular-in-memory-web-api": "~0.2.1", 
    "systemjs": "0.19.40", 
    "core-js": "^2.4.1", 
    "reflect-metadata": "^0.1.8", 
    "rxjs": "5.0.0-rc.4", 
    "zone.js": "^0.7.2" 
    }, 
    "devDependencies": { 
    "lite-server": "^2.3.0", 
    "typescript": "~2.0.10" 
    } 
}

Systemjs.config.js

(function (global) { 
    System.config({ 
    paths: { 
     'npm:': 'node_modules/' 
    }, 
    map: { 
     myApp: 'app', 
     '@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', 
     'rxjs': 'npm:rxjs', 
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', 
    }, 
    packages: { 
     myApp: { 
     main: './main.js', 
     defaultExtension: 'js' 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     }, 
     'angular-in-memory-web-api': { 
     main: './index.js', 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this);

但我得到的錯誤控制檯這樣的：

這裏是在VS代碼我的項目結構：

來源

2017-07-25 Ubiquitous Developers

你可以發佈你的'package.json'代碼嗎？ – hrdkisback

@hrdkisback - 我添加了package.json代碼 –

你應該添加你的'systemjs.config.js'。問題可能在於此。您已將文件夾'app'設置爲defaultExtension，但您對'services'文件夾沒有做同樣的操作 – PierreDuc

您應該將您的services文件夾到你app文件夾，這使得很多更有意義的話，並更改進口

import { PeopleService } from "./services/app.peopleListService";

或者添加新程序包到您systemjs.config.js ：

packages: { 
    services: { 
    defaultExtension: 'js' 
    },

來源

2017-07-25 10:05:17 PierreDuc

我在systemjs.config.js中添加了包，因爲我不想更改文件夾層次結構。 –

我認爲這是"./services/app.peopleListService"

module.ts

import { PeopleService } from "./services/app.peopleListService";

來源

2017-07-25 09:57:12 hrdkisback

我已經嘗試過，但VSCode顯示我找不到錯誤 –

Angular2自定義服務未找到

回答

相關問題