Angular-cli: ng test error: Property 'map' does not exist on type 'Observable<Response>'

[yuvalbl]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
Windows 7

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:
1.0.0-beta.21

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

1. CLI: ng new ngcli_demo_b21
2. CLI: ng g service srv
3. in the srv.service.ts file add: import {Http} from '@angular/http';
4. in the srv.service.ts file replace the constructor with::
   constructor(http: Http) {
   return http.get('/dummy-data/items.json').map(res => res.json());
   }
5. in the srv.service.spec.ts file add: import {HttpModule} from '@angular/http';
6. edit: srv.service.spec.ts - add HttpModule in beforeEach:
7. CLI: ng test

The log given by the failure.

Normally this include a stack trace and some more information.
Stack trace (location has been removed for security reasons):

ERROR in [default] \ngcli_demo_b21\src\app\srv.service.ts:12:46
Property 'map' does not exist on type 'Observable'.
23 11 2016 13:13:59.584:WARN [karma]: Port 9876 in use
23 11 2016 13:13:59.586:INFO [karma]: Karma v1.2.0 server started at http://localhost:9877/
23 11 2016 13:13:59.587:INFO [launcher]: Launching browser Chrome with unlimited concurrency
23 11 2016 13:13:59.664:INFO [launcher]: Starting browser Chrome
23 11 2016 13:14:01.025:INFO [Chrome 54.0.2840 (Windows 7 0.0.0)]: Connected on socket /#vSWl35wXjIdlsGcgAAAA with id 6986885
Chrome 54.0.2840 (Windows 7 0.0.0) SrvService should ... FAILED
TypeError: http.get(...).map is not a function
at new SrvService (webpack:/ngcli_demo_b21/src/app/srv.service.ts:12:46 <- src/test.ts:48608:51)
at DynamicTestModuleInjector.get (/DynamicTestModule/module.ngfactory.js:150:65)
at DynamicTestModuleInjector.getInternal (/DynamicTestModule/module.ngfactory.js:215:50)
at DynamicTestModuleInjector.NgModuleInjector.get (webpack:/ngcli_demo_b21/~/@angular/core/src/linker/ng_module_factory.js:94:0 <- src/test.ts:30889:27)
at TestBed.get (webpack:/ngcli_demo_b21/~/@angular/core/bundles/core-testing.umd.js:813:0 <- src/test.ts:7206:51)
at webpack:/ngcli_demo_b21/~/@angular/core/bundles/core-testing.umd.js:819:50 <- src/test.ts:7212:65
at Array.map (native)
at TestBed.execute (webpack:/ngcli_demo_b21/~/@angular/core/bundles/core-testing.umd.js:819:0 <- src/test.ts:7212:33)
at Object. (webpack:/ngcli_demo_b21/~/@angular/core/bundles/core-testing.umd.js:907:32 <- src/test.ts:7300:49)
at ZoneDelegate.invoke (webpack:/ngcli_demo_b21/~/zone.js/dist/zone.js:232:0 <- src/test.ts:52087:26)
at ProxyZoneSpec.onInvoke (webpack:/ngcli_demo_b21/~/zone.js/dist/proxy.js:79:0 <- src/test.ts:36715:39)
Chrome 54.0.2840 (Windows 7 0.0.0): Executed 4 of 4 (1 FAILED) (0.287 secs / 0.194 secs)

note that:

1. First error: Property 'map' does not exist on type 'Observable'. - occur before actual test script runs
2. the test result stay the same whether items.json exist or not
3. for some reason github treat tilda in a weird way on the Stack Trace . let me know if you would like me to send the Stack Trace as a text file.

Mention any other details that might be useful.

This issue can be solved by adding the following code to srv.service.ts
import 'rxjs/Rx';
OR
import {Observable} from 'rxjs';
import 'rxjs/add/operator/map';
HOWEVER
this required for tests only, as ng serve works just fine without it

---

Thanks! We'll be in touch soon.

[filipesilva]

This has to do with how rxjs works. Basically you need to import the operators before using them. This is overall fine in your app, but in your tests you also have to do that, because they only import the specific components and will not import the whole app.

[serhiisol]

@filipesilva but test bundle imports polyfills file which in the same time imports everything from rxjs

[playground]

@filipesilva just upgraded to 1.0.0, it's complaining in the service that Property 'map' does not exist on type 'Observable'

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/observable';
import 'rxjs/add/operator/map'

@Injectable()
export class CommonService {

constructor(private http: Http) { }

httpGet(url) {
return this.http.get(url)
.map(response => response.json());
}
}

[mjaric]

I solved issue by adding following includes in test.ts file in src/app folder in my solution

import 'core-js/es6';
import 'core-js/es7/reflect';

import 'ts-helpers';

import 'zone.js/dist/zone.js';
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import { getTestBed } from '@angular/core/testing';
import {
  BrowserDynamicTestingModule,
  platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';

import 'rxjs/Rx';

adding specific operators or extensions in component/service/etc. ts file do not make any difference.

[amrit123]

import map like this : import { map } from "rxjs/operators";
and then use map like this
pipe(map(res => res.json()));

so
map(res=>res.json()) becomes pipe(map(res => res.json()));

this should work

[maksof-kashif]

hello! angular new version not support .map you have to install this through cmd
npm install --save rxjs-compat
via this you can enjoy with old technique .
note:
don't forget to import these lines.
import { Observable, Subject } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
thank you

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}