Angular2：this.http.get(...).map 不是函数，但仅在 AoT 编译时答案

【问题标题】：Angular2: this.http.get(...).map is not a function but only when AoT compilationAngular2：this.http.get(...).map 不是函数，但仅在 AoT 编译时
【发布时间】：2017-02-15 11:51:17
【问题描述】：

我正在使用服务来发出 http get 请求：

import { Headers, Http }      from '@angular/http';
import { Observable }         from 'rxjs';
import 'rxjs/add/operator/map';

.... classcode.....

getOffices(): Observable<Office[]> {
    const url = `${this.apiurl}office`
    console.log(url);
    return this.http.get(url)
      .map(response => response.json());
  };

这一切都适用于我在开发时使用的 SystemJS。但是，当我将 AoT 编译与 rollup 和 uglify 一起使用时，我不断收到错误消息：

bundle.min.js:7 例外：未捕获（承诺）：TypeError：this.http.get(...).map 不是函数

我能找到的只是人们说将import 'rxjs/add/operator/map' 添加到 main.ts 文件或 app.module.ts 文件中。我已将此添加到每个相关文件中，并将 import 'rxjs/Rx' 添加到所有相关文件中，但似乎没有任何效果..

有没有人成功结合使用http请求和AoT编译？

这是我用于 AoT 的 de tsconfig 文件：

    {
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",
    "declaration": false,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "pretty": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitUseStrict": false,
    "noFallthroughCasesInSwitch": true,
    "outDir": "./dist",
    "rootDir": "./compiled"
  },
  "compileOnSave": false,
  "files": [
    "compiled/main-ngc.ts"
  ],
  "filesGlob":[
      "typings.d.ts",
      "compiled/main-ngc.ts",
      "compiled/main.ts"
      ],
  "exclude": [
    "node_modules"
  ]
}

这些是我正在使用的构建命令：

"build": "tsc -p tsconfig-compiled.json && gulp libs",
"rollup": "rollup -f iife -c -o dist/bundle.es2015.js",
"es5": "tsc --target es5 --allowJs dist/bundle.es2015.js --out dist/bundle.js",
"build_prod": "npm run ngc && npm run build && npm run rollup && npm run es5 && npm run minify && gulp clean:build && gulp build_prod",
"minify": "uglifyjs dist/bundle.js --screw-ie8 --compress --mangle --output dist/bundle.min.js",

欢迎任何帮助！

【问题讨论】：

标签： angular angular2-http angular2-aot

【解决方案1】：

我找到了解决方案。问题出在使用汇总的摇树过程中。我没有在我的 rollup.config.js 文件中添加 rxjs 库作为参考。

import rollup      from 'rollup';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify';

export default {
  entry: 'dist/main.js',
  dest: 'dist/bundle.min.js',
  sourceMap: true,
  format: 'iife',
  moduleName: 'main',
  plugins: [
      nodeResolve({jsnext: true, module: true}),
      commonjs({
        include: 'node_modules/rxjs/**',
      }),
      uglify()
  ]
}

这里的线索是commonjs部分：

commonjs({
    include: 'node_modules/rxjs/**',
  })

希望这对某人有所帮助！

【讨论】：