Angularfire: Module not found: Error: Can't resolve '@firebase/XXXX' in '~/node_modules/firebase/...' after Firebase 4.8.1

[vincent-cm]

Version info

Angular:
5.1.1
Firebase:
4.8.1
AngularFire:
5.0.0-rc.4
Other (e.g. Ionic/Cordova, Node, browser, operating system):
Other latest; OS: macOS latest when submitting

How to reproduce these conditions

npm start failed to compile
Failing test unit, Plunkr, or JSFiddle demonstrating the problem

Steps to set up and reproduce

Sample data and security rules

<-- include/attach/link to some json sample data (or provide credentials to a sanitized, test Firebase project) -->

Debug output

* Errors in the JavaScript console *

Can't resolve '@firebase/polyfill' in ...
Can't resolve '@firebase/firestore'
Can't resolve '@firebase/database'
Can't resolve '@firebase/auth'
Can't resolve '@firebase/app' in '/.../node_modules/firebase/XXXX'
@ ./node_modules/firebase/auth/index.js 17:0-25
@ ./node_modules/angularfire2/auth/auth.module.js
@ ./node_modules/angularfire2/auth/public_api.js
@ ./node_modules/angularfire2/auth/index.js
@ ./src/app/app.module.ngfactory.js
@ ./src/main.browser.ts
@ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./src/main.browser.ts

* Output from firebase.database().enableLogging(true); *

* Screenshots *

Expected behavior

Actual behavior

[bjornharvold]

Same setup and I think same issue:

ERROR in node_modules/@firebase/database/dist/esm/src/api/Database.d.ts(4,33): error TS2307: Cannot find module '@firebase/app-types/private'.

[zgosalvez]

Rolling back to "firebase": "4.8.0" "fixed" it for me.

[danielsogl]

They refactored the firebase javascript sdk typing files. AngularFire2 has to refactor the firebase typing imports to fix that issue.

https://firebase.google.com/support/release-notes/js

[hanihoumani93]

Go back to firebase 4.8.0:

1. In your CLI with you project path type: npm uninstall firebase (which is 4.8.1)
2. then once fish uninstall, type: npm cache clear
3. -then type: npm install firebase@^4.8.0
4. -finally: Remove "firebase": "^4.8.1" in dependencies in package.json and Type "firebase": "4.8.0"
   (Note: without ^). Save All and your problem will be solved! :)

[TudorIoanMarin]

This still happens in firebase 4.10.1 with angularfire2 5.0.0-rc.6, is there a fix for this?

[devHamza]

I have the same issue in the latest version "firebase": "^4.12.1", "angularfire2": "^5.0.0-rc.6.0" !!

[vchannabasav]

even I have the same issue in the latest version "firebase": "^4.12.1", "angularfire2": "^5.0.0-rc.6.0", please suggest some solution

[anasbaddyr]

Hey guys i was having similar issues.
After upgrading to the latest firebase "firebase": "^4.12.1", it decided to remove some packages that i needed in my app so i had to add them back explicitly and it works now using:

npm i @firebase/auth
npm i @firebase/auth-types
npm i @firebase/firestore

Try doing this for the what it says you're missing it may have removed them in the upgrade.

[jobehi]

the issue remains with "angularfire2": "^5.0.0-rc.6.0" and "firebase": "^4.13.0",

[agosto-chrisbartling]

@anasbaddyr Thanks for the tip. Adding the individual module packages seems to fix the issue.

[pedrocoder]

I solved with npm install @firebase/[email protected]

[jobehi]

it worked just fine when I downgraded firebase version, actual config : "angularfire2": "5.0.0-rc.6.0",
"firebase": "4.12.1",

[gary60405]

I solved it by reinstalling @firebase/auth

[JimBlaney]

angularfire2 ^5.0.0-rc.9
firebase     ^5.0.3

I solved it by putting this interface definition in the file where I keep my models exports:

export interface Timestamp {
  constructor(seconds: number, nanoseconds: number);
  readonly seconds: number;
  readonly nanoseconds: number;
  toDate(): Date;
  toMillis(): number;
  isEqual(other: Timestamp): boolean;
}

[vincent-cm]

npm i @firebase/auth
npm i @firebase/auth-types
npm i @firebase/firestore

....

Thanks this solved the issue

[ohabash]

Is this still the best solution today? This break other parts of my app.

https://stackoverflow.com/questions/52374952/ng-build-prod-cant-resolve-public-api-in-node-modules-angularfire2-d

{ "name": "fornida-ng6", "version": "0.0.0", "scripts": { "ng": "ng", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e", "prestart": "ng build --prod && ngc", "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server", "serve:ssr": "node dist/server", "build:client-and-server-bundles": "ng build --prod && ng run fornida-ng6:server", "webpack:server": "webpack --config webpack.server.config.js --progress --colors" }, "private": true, "dependencies": { "@angular/animations": "^6.1.7", "@angular/common": "^6.1.7", "@angular/compiler": "^6.1.7", "@angular/core": "^6.1.7", "@angular/forms": "^6.1.7", "@angular/http": "^6.1.7", "@angular/platform-browser": "^6.1.7", "@angular/platform-browser-dynamic": "^6.1.7", "@angular/platform-server": "^6.1.7", "@angular/router": "^6.1.7", "@angular/service-worker": "^6.1.7", "@ng-toolkit/universal": "^1.1.41-beta.110", "@nguniversal/express-engine": "^6.1.0", "@nguniversal/module-map-ngfactory-loader": "^6.1.0", "angularfire2": "^5.0.0-rc.10", "core-js": "^2.5.4", "desandro-classie": "^1.0.1", "express": "^4.16.3", "firebase": "^5.0.4", "font-awesome": "^4.7.0", "jquery": "^3.3.1", "jsoneditor": "^5.24.6", "jwt-decode": "^2.2.0", "jwt-simple": "^0.5.1", "ng-snotify": "^4.3.1", "ngx-slick": "^0.1.3", "node-bigcommerce": "^3.0.0", "rellax": "^1.7.0", "request": "^2.88.0", "rxjs": "^6.2.1", "rxjs-compat": "^6.2.1", "sticky-js": "^1.2.0", "ts-loader": "^5.1.1", "zone.js": "^0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.6.8", "@angular/compiler-cli": "^6.1.7", "@angular/language-service": "^6.1.7", "@nativescript/schematics": "^0.3.1", "@types/jasmine": "~2.8.6", "@types/jasminewd2": "~2.0.3", "@types/jquery": "^3.3.6", "@types/node": "^8.10.29", "codelyzer": "~4.2.1", "jasmine-core": "~2.99.1", "jasmine-spec-reporter": "~4.2.1", "karma": "~1.7.1", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^2.0.4", "karma-jasmine": "~1.1.1", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.3.0", "ts-node": "~5.0.1", "tslint": "~5.9.1", "typescript": "~2.7.2", "webpack-cli": "^3.1.0" } }

[elron]

VS Code mistakenly put the wrong source path

// Possible wrong paths
import { AngularFirestore } from '@angular/fire/firestore/firestore';
import { AngularFirestoreDocument } from '@angular/fire/firestore/public_api';

// The right path
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';`

[yoni333]

VS Code mistakenly put the wrong source path

// Possible wrong paths
import { AngularFirestore } from '@angular/fire/firestore/firestore';
import { AngularFirestoreDocument } from '@angular/fire/firestore/public_api';

// The right path
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';`

i had same problem in angular 9.1 firebase 7.14 and firebase cli 8.4 base on this answer that the problem is made by vs code auto imports system - i fix my problem with the same logic but diffrent path