找不到模块“ @ angular / core”。 找不到模块“ 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

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

Answer 2

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/brian run

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, (eg 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!