属性 angular 中的可观察响应不存在地图
property map does not exist on observable response in angular
我正在尝试在 visual studio 2015 应用程序中使用打字稿构建一个 angular 2 应用程序。我正在使用 angular 候选版本 1.
我创建了一个 risk.service 组件,它将为我的视图提供数据。尝试使用可观察的。但是,我在 visual studio 编辑器
中收到以下错误消息
属性 地图在可观察响应中不存在
risk.service.ts
import { Injectable } from '@angular/core';
import { IRisk } from './risk';
import { Http, Response } from '@angular/http';
import 'rxjs/Rx'
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Injectable()
export class RiskService {
private _riskUrl = 'www.MyService.com/api/risks';
constructor(private _http: Http) { }
getRisks(): Observable<IRisk[]> {
return this._http.get(this._riskUrl)
.map((response: Response) => <IRisk[]>response.json());
}
}
Systemjs.config.js
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular',
'primeng': 'node_modules/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' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
'primeng': { defaultExtension: 'js' }
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/testing',
'@angular/upgrade',
'@angular/router-deprecated'
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
Package.json
{
"name": "product-management",
"version": "1.0.0",
"author": "Deborah Kurata",
"description": "Package for the Acme Product Management sample application",
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"es6-shim": "^0.35.0",
"primeng": "^1.0.0-beta.6",
"primeui": "^4.1.11",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.8",
"systemjs": "0.19.26",
"zone.js": "^0.6.12"
},
"devDependencies": {
"angular-cli": "^1.0.0-beta.0",
"clang-format": "^1.0.35",
"codelyzer": "0.0.14",
"ember-cli-inject-live-reload": "^1.4.0",
"es6-promise": "3.2.1",
"jasmine-core": "^2.4.1",
"jasmine-spec-reporter": "^2.4.0",
"karma": "^0.13.15",
"karma-chrome-launcher": "^0.2.3",
"karma-jasmine": "^0.3.8",
"protractor": "^3.3.0",
"ts-node": "^0.5.5",
"tslint": "^3.6.0",
"typescript": "^1.8.10",
"typings": "^0.8.1"
},
"repository": {}
}
我认为你可以尝试使用 Rxjs 的 5.0.0-beta.6 版本:
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"es6-shim": "^0.35.0",
"primeng": "^1.0.0-beta.6",
"primeui": "^4.1.11",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6", // <-----
"systemjs": "0.19.26",
"zone.js": "^0.6.12"
},
按照 angular.io 网站上 "5min quickstart" doc 的建议。
您遇到的问题实际上与 TypeScript VS 加载项和 Intellisense 有关,而不是专门针对 Angular2。这是一个已知问题,已修复并将包含在下一个版本中。
替换文件:C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js
与下面的文件。备份后:https://raw.githubusercontent.com/Microsoft/TypeScript/Fix8518/lib/typescriptServices.js
这在技术上是 question 的副本(参见 Eric Weiss 的回答):
我正在尝试在 visual studio 2015 应用程序中使用打字稿构建一个 angular 2 应用程序。我正在使用 angular 候选版本 1.
我创建了一个 risk.service 组件,它将为我的视图提供数据。尝试使用可观察的。但是,我在 visual studio 编辑器
中收到以下错误消息属性 地图在可观察响应中不存在
risk.service.ts
import { Injectable } from '@angular/core';
import { IRisk } from './risk';
import { Http, Response } from '@angular/http';
import 'rxjs/Rx'
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Injectable()
export class RiskService {
private _riskUrl = 'www.MyService.com/api/risks';
constructor(private _http: Http) { }
getRisks(): Observable<IRisk[]> {
return this._http.get(this._riskUrl)
.map((response: Response) => <IRisk[]>response.json());
}
}
Systemjs.config.js
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular',
'primeng': 'node_modules/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' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
'primeng': { defaultExtension: 'js' }
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/testing',
'@angular/upgrade',
'@angular/router-deprecated'
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function (pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
Package.json
{
"name": "product-management",
"version": "1.0.0",
"author": "Deborah Kurata",
"description": "Package for the Acme Product Management sample application",
"scripts": {
"start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"es6-shim": "^0.35.0",
"primeng": "^1.0.0-beta.6",
"primeui": "^4.1.11",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.8",
"systemjs": "0.19.26",
"zone.js": "^0.6.12"
},
"devDependencies": {
"angular-cli": "^1.0.0-beta.0",
"clang-format": "^1.0.35",
"codelyzer": "0.0.14",
"ember-cli-inject-live-reload": "^1.4.0",
"es6-promise": "3.2.1",
"jasmine-core": "^2.4.1",
"jasmine-spec-reporter": "^2.4.0",
"karma": "^0.13.15",
"karma-chrome-launcher": "^0.2.3",
"karma-jasmine": "^0.3.8",
"protractor": "^3.3.0",
"ts-node": "^0.5.5",
"tslint": "^3.6.0",
"typescript": "^1.8.10",
"typings": "^0.8.1"
},
"repository": {}
}
我认为你可以尝试使用 Rxjs 的 5.0.0-beta.6 版本:
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"es6-shim": "^0.35.0",
"primeng": "^1.0.0-beta.6",
"primeui": "^4.1.11",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6", // <-----
"systemjs": "0.19.26",
"zone.js": "^0.6.12"
},
按照 angular.io 网站上 "5min quickstart" doc 的建议。
您遇到的问题实际上与 TypeScript VS 加载项和 Intellisense 有关,而不是专门针对 Angular2。这是一个已知问题,已修复并将包含在下一个版本中。
替换文件:C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js
与下面的文件。备份后:https://raw.githubusercontent.com/Microsoft/TypeScript/Fix8518/lib/typescriptServices.js
这在技术上是 question 的副本(参见 Eric Weiss 的回答):