Angular2 HTTP缺少.MAP功能 [英] Angular2 http is missing .map function

问题描述

我发现这个例子code中的教程：

  getRandomQuote（）{
  this.http.get（的http：//本地主机：3001 / API /随机报价）
    .MAP（RES =＆GT; res.text（））
    。订阅（
      数据=＆GT; this.randomQuote =数据，
      ERR =＆GT; this.logError（ERR）
      （）=＆GT;的console.log（'随机报价完成'）
    ）;
}
 

但是，试图使用它的时候，我只得到类型错误：this.http.get（...）地图是不是在[空] 功能：

  getChannels（）：无极＆lt;渠道＆GT; {
    返回this.http.get（'...'）
        .MAP（功能（响应：响应）{
            ...
        }）。承诺（）;
}
 

我的打字稿编译器告诉我，这些方法是avaible但检查 http.get）的返回值（当它们丢失。

我目前使用的angualar2初始参考的的package.json：

 依赖：{
  angular2：2.0.0-beta.0
  systemjs：0.19.6，
  ES6-承诺：^ 3.0.2
  ES6-垫片：^ 0.33.3
  反映了元数据：0.1.2
  rxjs：5.0.0-beta.0
  zone.js：0.5.10
}，
 

...

 ＆LT;脚本SRC =node_modules / angular2 /包/ angular2.dev.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =node_modules / angular2 /包/ http.dev.js＆GT;＆LT; / SCRIPT＆GT;
 

任何想法我可能在这一点上得到错误的？

解决方案

您会希望您的index.html到这个样子，所以system.js可以找到所有你在你的组件导入rxjs依赖。

\r

\r

＆LT;脚本SRC =/ lib中/ anguar2 / angular2-polyfills.js ＆GT;＆LT; / SCRIPT＆GT;\r
        ＆LT;脚本SRC =/ lib目录/ ES6-垫片/ ES6-shim.js＆GT;＆LT; / SCRIPT＆GT;\r
        ＆LT;脚本SRC =/ lib中/ systemjs / system.src.js＆GT;＆LT; / SCRIPT＆GT;\r
\r
        ＆LT;脚本＆GT;\r
            System.config（{\r
                defaultJSExtensions：真实，\r
                包：{\r
                    应用：{\r
                        格式为：注册\r
                    }\r
                }，\r
                图：{\r
                    rxjs：LIB / rxjs\r
\r
                }\r
            }）;\r
        ＆LT; / SCRIPT＆GT;\r
        ＆LT;脚本SRC =/ lib中/ anguar2 / angular2.dev.js＆GT;＆LT; / SCRIPT＆GT;\r
        ＆LT;脚本SRC =/ lib中/ anguar2 / router.dev.js＆GT;＆LT; / SCRIPT＆GT;\r
        ＆LT;脚本SRC =/ lib中/ anguar2 / http.js＆GT;＆LT; / SCRIPT＆GT;\r
        ＆LT;脚本＆GT;\r
            System.import（应用程序/启动'）;\r
        ＆LT; / SCRIPT＆GT;

\r

\r

\r确保的lib / rxjs文件夹中有一切从node_modules文件/文件夹rxjs。不是所有的人都会被载入，只有那些你需要和它们的依赖（system.js会摸不着头脑你）。

现在你可以在你boot.ts文件中使用这样的：

\r

\r

进口'rxjs /添加/运营/图;

\r

\r

\r

I found this example code in a tutorial:

getRandomQuote() {
  this.http.get('http://localhost:3001/api/random-quote')
    .map(res => res.text())
    .subscribe(
      data => this.randomQuote = data,
      err => this.logError(err),
      () => console.log('Random Quote Complete')
    );
}

But when trying to use it, I only get TypeError: this.http.get(...).map is not a function in [null]:

getChannels():Promise<Channel> {
    return this.http.get('...')
        .map(function (response:Response) {
            ...
        }).toPromise();
}

My Typescript compiler tells me that those methods are avaible but when inspecting the return value of http.get() they are missing.

I used the package.json of the current angualar2 starting guide:

"dependencies": {
  "angular2": "2.0.0-beta.0",
  "systemjs": "0.19.6",
  "es6-promise": "^3.0.2",
  "es6-shim": "^0.33.3",
  "reflect-metadata": "0.1.2",
  "rxjs": "5.0.0-beta.0",
  "zone.js": "0.5.10"
},

...

<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>

Any ideas what I might get wrong at this point?

解决方案

You will want your index.html to look something like this, so system.js can find all the rxjs dependencies that you import in your components.

        <script src="/lib/anguar2/angular2-polyfills.js"></script>
        <script src="/lib/es6-shim/es6-shim.js"></script>
        <script src="/lib/systemjs/system.src.js"></script>

        <script>
            System.config({
                defaultJSExtensions: true,
                packages: {
                    app: {
                        format: 'register'
                    }
                },
                map: {
                    'rxjs':"lib/rxjs"

                }
            });
        </script>
        <script src="/lib/anguar2/angular2.dev.js"></script>
        <script src="/lib/anguar2/router.dev.js"></script>
        <script src="/lib/anguar2/http.js"></script>
        <script>
            System.import('app/boot');
        </script>

Make sure the "lib/rxjs" folder has ALL the files from the node_modules/rxjs folder. Not all of them will be loaded, only the ones you need and their dependencies (system.js will figure this out for you).

Now you can use this in your boot.ts file:

import 'rxjs/add/operator/map';

这篇关于Angular2 HTTP缺少.MAP功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！