Cannot find module '@angular/core'. Cannot find module 'rxjs'

Question

Environment:

OS: Linux Mint 18 Cinnamon 64-bit
NPM: 5.6.0
Node: v10.0.0
Ionic: 3.20.0

How I receive this error

I was following this tutorial to apply firebase to an ionic project using angularfire2. I follow the tutorial exactly until I receive an error while running

$ ionic serve

The full error is like this:

typescript: home/brian/node_modules/angularfire2/angularfire2.d.ts, line: 1 
Cannot find module '@angular/core'. 

L1:  import { InjectionToken, NgZone } from '@angular/core';
L2:  import { Observable, Subscription } from 'rxjs';

typescript: home/brian/node_modules/angularfire2/angularfire2.d.ts, line: 2 
Cannot find module 'rxjs'. 

L1:  import { InjectionToken, NgZone } from '@angular/core';
L2:  import { Observable, Subscription } from 'rxjs';
L3:  import { FirebaseOptions, FirebaseAppConfig } from '@firebase/app-types';

typescript: home/brian/node_modules/angularfire2/auth/auth.d.ts, line: 3 
Cannot find module '@angular/core'. 

L2:  import { FirebaseOptions, FirebaseAppConfig } from '@firebase/app-types';
L3:  import { NgZone } from '@angular/core';
L4:  import { Observable } from 'rxjs';

typescript: home/brian/node_modules/angularfire2/auth/auth.d.ts, line: 4 
Cannot find module 'rxjs'. 

L3:  import { NgZone } from '@angular/core';
L4:  import { Observable } from 'rxjs';
L5:  export declare class AngularFireAuth {

typescript: home/brian/node_modules/angularfire2/firebase.app.module.d.ts, line: 1 
Cannot find module '@angular/core'. 

L1:  import { InjectionToken } from '@angular/core';
L2:  import { FirebaseApp as _FirebaseApp, FirebaseOptions, FirebaseAppConfig } from '@firebase/app-types';

Traceback

Tracing back, when I was installing angularfire2 through command line, I run this command (following the documentation)

npm install firebase angularfire2 --save

And it returns this:

npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EAI_AGAIN: request to https://registry.npmjs.org/firebase failed, reason: getaddrinfo EAI_AGAIN registry.npmjs.org registry.npmjs.org:443
npm WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
npm WARN angularfire2@5.0.0-rc.7 requires a peer of @angular/common@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angularfire2@5.0.0-rc.7 requires a peer of @angular/core@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angularfire2@5.0.0-rc.7 requires a peer of @angular/platform-browser@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angularfire2@5.0.0-rc.7 requires a peer of @angular/platform-browser-dynamic@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angularfire2@5.0.0-rc.7 requires a peer of @firebase/app@^0.1.6 but none is installed. You must install peer dependencies yourself.
npm WARN angularfire2@5.0.0-rc.7 requires a peer of rxjs@^5.5.4 but none is installed. You must install peer dependencies yourself.
npm WARN angularfire2@5.0.0-rc.7 requires a peer of zone.js@^0.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN bin@1.0.0 No description
npm WARN bin@1.0.0 No repository field.

+ angularfire2@5.0.0-rc.7
+ firebase@5.0.2
updated 2 packages in 80.502s

Then I try to run the same command again, now it returns almost the same as above but without the npm WARN registry.

npm WARN angularfire2@5.0.0-rc.8.0 requires a peer of @angular/common@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angularfire2@5.0.0-rc.8.0 requires a peer of @angular/core@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angularfire2@5.0.0-rc.8.0 requires a peer of @angular/platform-browser@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angularfire2@5.0.0-rc.8.0 requires a peer of @angular/platform-browser-dynamic@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angularfire2@5.0.0-rc.8.0 requires a peer of rxjs@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angularfire2@5.0.0-rc.8.0 requires a peer of zone.js@^0.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN bin@1.0.0 No description
npm WARN bin@1.0.0 No repository field.

The file package.json is located in /home/brian and it contains the lines below.

{
  "name": "bin",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "angular": "^1.7.0",
    "angularfire2": "^5.0.0-rc.8.0",
    "cordova": "^8.0.0",
    "firebase": "^5.0.2",
    "ionic": "^3.20.0",
    "npm": "^6.0.1"
  }
}

There is this text in browser after i run $ ionic serve

Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.9
Angular Core: 5.2.10
Angular Compiler CLI: 5.2.10
Node: 10.0.0
OS Platform: Linux 4.4
Navigator Platform: Linux x86_64
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0

I think I installed angularfire on the same location as npm and node, because I run all these installation command in my default location when opening command line. It should be in /home/brian. I also have this folder /home/brian/node_modules.

My Google research to solve this

This similar thread says that we need to rename @angular to @angular2, but I found it returns same error.

Does anyone ever experience the same issue? Any help would be appreciated.

Answer 1

Thanks @Pengyy, your suggestion is really close to fix it, just need to add one more step.

This error is caused by the non compatible versions I used accross ionic - @angular/core - firebase - angularfire2 - and rxjs.

The way I solve it is is following @Pengyy's answer:

In my home folder /home/brianrun

1. npm install @angular/[package-name]@4.4.6
2. npm install firebase@4.5.0 angularfire2@5.0.0-rc.3 --save
3. npm install rxjs@5.0.1 --save

Then need to do one more step: in my ionic project folder where I run ionic serve, (e.g. project name is myApp the folder is /home/brian/myApp) run this command.

1. npm install firebase@4.5.0

---

This last step is necessary, otherwise I still got an error

Runtime Error 
Cannot find module "firebase/auth"

---

This problem is solved!

Answer 2

Based on you version info of ionic v 3.9.2, you need to install angular V4.4.6, refer ionic dependencies. BTW, when you don't declare the exact version you want to install, npm will install the latest version by default.

You can use below command:

// all angular packages listed in above dependencies 
npm install @angular/[package-name]@4.4.6

And based on version of angular packages, you should install AngularFire2 **v5.0.0-rc.3** and rxjs of v5.0.1+(not v6.x).

npm install firebase@4.5.0 angularfire2@5.0.0-rc.3 --save
npm install rxjs@5.0.1 --save