0
我有兩個簡單的服務。兩者都應該返回REST API的結果。http.get（）失敗，因爲Promise and Observable
本來我已經開始了一個承諾。我無法弄清楚，爲什麼toPromise()未找到（同樣的問題here
於是，我就切換到可觀察到的問題是相似的：。map()找不到
讓我給你足夠的代碼...
// package.json
{
"name": "mvc-angular-2",
"version": "0.0.1",
"license": "ISC",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.1",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.4",
"bootstrap": "^3.3.6",
"core-js": "^2.4.0",
"primeng": "^1.0.0-beta.9",
"primeui": "^4.1.12",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"gulp": "^3.9.1",
"q": "^1.4.1",
"rimraf": "^2.5.3",
"typescript": "^1.8.10",
"typings": "^1.0.4"
}
}
// typings.json
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160602141332",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160621231320"
}
}
// tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "../wwwroot/app/"
},
"compileOnSave": true,
"exclude": [
"node_modules",
"wwwroot"
]
}
// systemjs.config.js
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'lib/@angular',
'rxjs': 'lib/rxjs',
'primeng': 'lib/primeng'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'primeng': { defaultExtension: 'js' }
};
var ngPackageNames = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
// main.ts
/// <reference path="../typings/globals/core-js/index.d.ts" />
import { bootstrap } from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import { AppComponent } from './components/app.component';
import { appRouterProviders } from './app.routes';
bootstrap(AppComponent, [
appRouterProviders,
HTTP_PROVIDERS,
]);
// app.component.ts
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import './rxjs-operators';
import { PrivilegeService } from '../services/privilege.service';
import { UserService } from '../services/user.service';
@Component({
selector: 'my-app',
templateUrl: "app/app.component.html",
styleUrls: ["app/app.component.css"],
directives: [ROUTER_DIRECTIVES],
providers: [
PrivilegeService,
UserService
]
})
export class AppComponent {
title = 'NG App 3.0 Future beta 0.001';
}
// users.components.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { DataTable, Column } from '../../node_modules/primeng/primeng';
import { User } from '../models/user';
import { UserService } from '../services/user.service';
@Component({
selector: 'my-users',
templateUrl: 'app/users.component.html',
providers: [UserService],
directives: [DataTable, Column]
})
export class UsersComponent implements OnInit {
users: User[];
constructor(
private router: Router,
private userService: UserService) { }
getUsers() {
this.userService
.getUsers()
.then(users => this.users = users)
.catch(error => console.log(error));
}
ngOnInit() {
this.getUsers();
}
gotoUserDetails(event) {
let link = ['/user', event.data.id];
this.router.navigate(link);
}
}
// user.service.ts (Promise)
import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import '../rxjs-operators';
import { User } from '../models/user';
@Injectable()
export class UserService {
private usersUrl = 'http://localhost:25153/users';
constructor(private http: Http) { }
getUsers(): Promise<User[]> {
return this.http.get(this.usersUrl)
// .toPromise() cannot be found
.toPromise()
.then(response => response.json())
.catch(this.handleError);
}
getUser(id: string) {
return this.getUsers()
.then(users => users.find(user => user.id === id));
}
private handleError(error: any) {
console.error('An error occurred', error);
return Promise.reject(error.message || error);
}
}
// privilege.service.ts (Observable)
import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import '../rxjs-operators';
import { Privilege } from '../models/privilege';
@Injectable()
export class PrivilegeService {
private privilegesUrl = 'http://localhost:25153/privileges';
constructor(private http: Http) { }
getPrivileges(): Observable<Privilege[]> {
return this.http.get(this.privilegesUrl)
// .map() cannot be found, only .forEach(), .lift() and .subscribe() seem to be available
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body.data || {};
}
getPrivilege(id: string) {
return null;
//return this.getPrivileges()
// .then(privileges => privileges.find(privilege => privilege.id === id));
}
private handleError(error: any) {
console.error('An error occurred', error);
return Promise.reject(error.message || error);
}
}
最後但並非最不重要的：
npm -v：3.10.3node -v：v6.3.0- 的Visual Studio 2015年更新3
我已經刪除了文件夾node_modules和重建它。沒有改變一點。另外，我試圖在Visual Studio之外構建它，但我根本不知道如何做到這一點。當我輸入類似npm run tsc --rootDir .\app我得到以下輸出：
> [email protected] tsc C:\Users\Carsten Franke\Documents\Visual Studio 2015\Projects\MVCAngular2\src\Client
> tsc ".\app"
error TS6053: File 'app.ts' not found.
npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "tsc" "--rootDir" ".\\app"
npm ERR! node v6.3.0
npm ERR! npm v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! [email protected] tsc: `tsc ".\app"`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] tsc script 'tsc ".\app"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the mvc-angular-2 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! tsc ".\app"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs mvc-angular-2
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls mvc-angular-2
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Carsten Franke\Documents\Visual Studio 2015\Projects\MVCAngular2\src\Client\npm-debug.log
他是完全正確的，沒有文件app.ts。這就是爲什麼我告訴他要傳輸一個文件夾。順便說一句，這是文件和文件夾結構（由node_modules'的文件，該.MAP文件和一些Visual Studio的具體的東西剝去）：
D:\projects\MVCAngular2\src\Client\
...\app\app.routes.ts
...\app\components
...\app\components\app.component.html
...\app\components\app.component.ts
...\app\components\user-detail.component.html
...\app\components\user-detail.component.ts
...\app\components\users.component.html
...\app\components\users.component.ts
...\app\main.ts
...\app\models
...\app\models\privilege-group.ts
...\app\models\privilege.ts
...\app\models\user.ts
...\app\rxjs-operators.ts
...\app\services
...\app\services\privilege.service.ts
...\app\services\user.service.ts
...\app\tsconfig.json
...\gulpfile.js
...\node_modules\[14.536 node_modules files]
...\package.json
...\Program.cs
...\Startup.cs
...\typings
...\typings.json
...\typings\globals
...\typings\globals\core-js
...\typings\globals\core-js\index.d.ts
...\typings\globals\core-js\typings.json
...\typings\globals\jasmine
...\typings\globals\jasmine\index.d.ts
...\typings\globals\jasmine\typings.json
...\typings\globals\node
...\typings\globals\node\index.d.ts
...\typings\globals\node\typings.json
...\typings\index.d.ts
...\web.config
...\wwwroot
...\wwwroot\app
...\wwwroot\app\app.routes.js
...\wwwroot\app\components
...\wwwroot\app\components\app.component.js
...\wwwroot\app\components\user-detail.component.js
...\wwwroot\app\components\users.component.js
...\wwwroot\app\main.js
...\wwwroot\app\models
...\wwwroot\app\models\privilege-group.js
...\wwwroot\app\models\privilege.js
...\wwwroot\app\models\user.js
...\wwwroot\app\rxjs-operators.js
...\wwwroot\app\services
...\wwwroot\app\services\privilege.service.js
...\wwwroot\app\services\user.service.js
...\wwwroot\images\...
...\wwwroot\index.html
...\wwwroot\lib\[copy of node_modules]
...\wwwroot\scripts\...
...\wwwroot\styles\...
...\wwwroot\systemjs.config.js
我發現this nice plnkr它採用完全按照我做同樣的版本和奇蹟般有效。我看到的唯一區別是腳本在瀏覽器中被轉發。
任何想法有什麼不對？
最好的問候， 卡斯滕
你在system.config.js文件有ngPackageNames變量中的字段http？ – Yevgen
我已經添加了'systemjs.config.js'的內容。但是對於當前的設置（文件位於'wwwroot'），我懷疑它與我的問題有什麼關係。 –