Angular 4: Module not found error regarding RxJs

Question

when building the Angular app I get many of these errors, below is just the first one

ERROR in ./~/@reactivex/rxjs/dist/cjs/Rx.js
Module not found: Error: Can't resolve './add/operator/filter' in 
'...\node_modules\@reactivex\rxjs\dist\cjs'
 @ ./~/@reactivex/rxjs/dist/cjs/Rx.js 70:0-32
 @ ./~/@reactivex/rxjs/index.js
 @ ./~/ri-api-client/dist/index.js
 @ ./src/app/core/api.service.ts
 @ ./src/$$_gendir/app/app.module.ngfactory.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

what am I missing?

Solution 1

Based on your error message it seems that your import statement is not correct. It complains about not finding things in node_modules/@reactivex, but it should be looking in node_modules/rxjs.

Your import statement should look like this:

import 'rxjs/add/operator/filter';

Solution 2

I had similar error..

`ERROR in ./src/app/shared/giphy/giphy.service.ts`

Module not found: Error: Can't resolve 'rxjs/add/operator/map' in '/Users/user1/opt/work/mine/development/ic/ic-pms/pms-ui/src/app/shared/giphy' ℹ ｢wdm｣: Failed to compile. ERROR in src/app/shared/giphy/giphy.service.ts(16,35): error TS2339: Property 'map' does not exist on type 'Observable<Object>'.

Ans solution for that is npm install rxjs@6 rxjs-compat@6 --save

Solution 3

RXJS changed their syntax in version 6+

The new solution should be:

import { filter } from 'rxjs/operators';

not

import 'rxjs/add/operator/filter';

More details here: https://www.academind.com/learn/javascript/rxjs-6-what-changed/

Solution 4

Use pipe method for .map just add --

.pipe( your code, map......);

import { map } from 'rxjs/operators';

.pipe(map(
      (response) => response.json()
 ))

It works for me.

Solution 5

I found that angular is looking for rxjs/add/operator/map in the folder where it is used in the service instead of from node_modules.

I fixed this issue by just importing the rxjs in my app.module.ts. Try by adding the following code in app.module.ts

import 'rxjs';

View more solutions

Comments

[Konstantinos Papakonstantinou]

All of my import statements are like this. I just checked the @reactivex folder and the @reactivex\rxjs\dist\cjs\add folder inside it is empty, I guess that's why it's complaining. How can I reinstall these?

[Konstantinos Papakonstantinou]

Everything is there under the rxjs folder by the way

[Yakov Fain]

Delete you node_modules directory. Make sure that your package.json has this dependency: "rxjs": "^5.1.0". Then run npm install again.

[Thomas]

you saved my day!

[Robert Green MBA]

after doing npm install rxjs@6 rxjs-compat@6 --save I now get this error: ./node_modules/rxjs/_esm5/index.js Module build failed: Error: ENOENT: no such file or directory, open

[dimwittedanimal]

This answer shows the new import format for rxjs stackoverflow.com/a/52630985/8160553

[amir azizkhani]

i wake up and try to start my project and i see error, after see your answer i install rxjs-compat and it fixed. i don't know why?! :))