Angular2: this.http.get(...).map 不是一个函数,但只有在 AoT 编译时
Angular2: this.http.get(...).map is not a function but only when AoT compilation
我正在使用一项服务来发出 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 EXCEPTION: Uncaught (in promise): TypeError: this.http.get(...).map is not a function
我能找到的只是有人说要将 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",
欢迎任何帮助!
我找到了解决方案。
问题出在使用 rollup 进行 tree-shaking 期间。
我没有在我的 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/**',
})
希望这对某人有所帮助!
我正在使用一项服务来发出 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 EXCEPTION: Uncaught (in promise): TypeError: this.http.get(...).map is not a function
我能找到的只是有人说要将 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",
欢迎任何帮助!
我找到了解决方案。 问题出在使用 rollup 进行 tree-shaking 期间。 我没有在我的 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/**',
})
希望这对某人有所帮助!