我有两个简单的服务。两者都应该返回REST API的结果。
最初我是以承诺开始的。我无法弄清楚，为什么找不到toPromise()（问题与here相同。
所以我试着切换到Observable。问题类似：找不到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.3 node -v：v6.3.0 我已经删除了文件夹node_modules并重新构建了它。没有改变。
另外，我尝试在Visual Studio之外构建它，但我根本不知道如何这样做。当我输入类似npm run tsc --rootDir .\app的内容时，我得到以下输出：
> mvc-angular-2@0.0.1 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! mvc-angular-2@0.0.1 tsc: `tsc ".\app"`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the mvc-angular-2@0.0.1 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＆＃39;文件，.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使用与我完全相同的版本并且像魅力一样工作。我看到的唯一区别是脚本在浏览器中被转换。
任何想法有什么不对？
祝你好运， 卡斯滕
答案 0 :(得分：1)
看起来你导入错误了。使用您的导入，您已导入Observalbe对象，但未导入运算符。尝试更改服务文件：
import '../rxjs-operators';
到
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/catch';
或以更一般的方式：
import 'rxjs/Rx';
答案 1 :(得分：0)
问题是，tsc无法编译文件夹。只是。
它需要一个文件来编译。
如果你想编译所有 - 你必须使用一个建设者，如gulp - https://www.npmjs.com/package/gulp-typescript 或更好 - 网络包，我可以推荐这个启动器 - https://github.com/AngularClass/angular2-webpack-starter
我用它作为我公司项目的一个基础，现在正在生产中
或者，作为替代方案 - 智能IDE，如WebStorm或其他任何东西 - 可以在飞行中编译＆＃39;所有ts文件到js