Search code examples
angularfirebasefirebase-realtime-databaseangularfire

Angularfire Firebase realtime database TypeError: n.auth is not a function

I'm using this basic implementation to create a chatting application between 2 angular projects using the firebase(AngularFire library) real-time database. It works great on the local machine, but getting an error if I deploy to a remote server.

Package.json

"@angular/core": "^14.1.0",
"@angular/fire": "^7.4.1",
"firebase": "^9.9.1"

AppModule.ts

imports: [
   AngularFireModule.initializeApp(environment.firebase),
   AngularFireDatabaseModule
]

ChatComponent.ts

import {
  AngularFireDatabase,
  AngularFireList,
  AngularFireObject,
} from '@angular/fire/compat/database';

// if I comment below line then no error thrown.
constructor(private db: AngularFireDatabase) {}

ngOnInit(): void {
   let userPath = `/store/${this.dashboardDetails?.storeId}/users/${this.userDetails?.userUniqueIdentifier}`;
   let chatPath = `/store/${this.dashboardDetails?.storeId}/chats/${this.userDetails?.userUniqueIdentifier}`;
   let userRef = this.db.object(userPath);
   let chatRef = this.db.list(chatPath);
}

ERROR:

main.ae9e094fcbca7d0d.js:1 ERROR Error: Uncaught (in promise): TypeError: n.auth is not a function
TypeError: n.auth is not a function
    at 872.86323cbf178cf201.js:1:228031
    at T.invoke (polyfills.5ab4d973e79fe0e3.js:1:6555)
    at I.run (polyfills.5ab4d973e79fe0e3.js:1:1951)
    at Ho.runOutsideAngular (main.ae9e094fcbca7d0d.js:1:585774)
    at 872.86323cbf178cf201.js:1:228007
    at we (872.86323cbf178cf201.js:1:2513)
    at bd (872.86323cbf178cf201.js:1:227949)
    at new n (872.86323cbf178cf201.js:1:232700)
    at n.ɵfac [as factory] (872.86323cbf178cf201.js:1:234587)
    at Eu.hydrate (main.ae9e094fcbca7d0d.js:1:523280)
    at V (polyfills.5ab4d973e79fe0e3.js:1:15904)
    at V (polyfills.5ab4d973e79fe0e3.js:1:15440)
    at polyfills.5ab4d973e79fe0e3.js:1:16750
    at T.invokeTask (polyfills.5ab4d973e79fe0e3.js:1:7173)
    at Object.onInvokeTask (main.ae9e094fcbca7d0d.js:1:584721)
    at T.invokeTask (polyfills.5ab4d973e79fe0e3.js:1:7094)
    at I.runTask (polyfills.5ab4d973e79fe0e3.js:1:2568)
    at L (polyfills.5ab4d973e79fe0e3.js:1:9173)
    at m.invokeTask [as invoke] (polyfills.5ab4d973e79fe0e3.js:1:8254)
    at S (polyfills.5ab4d973e79fe0e3.js:1:20123)
handleError @ main.ae9e094fcbca7d0d.js:1
next @ main.ae9e094fcbca7d0d.js:1
__tryOrUnsub @ main.ae9e094fcbca7d0d.js:1
next @ main.ae9e094fcbca7d0d.js:1
_next @ main.ae9e094fcbca7d0d.js:1
next @ main.ae9e094fcbca7d0d.js:1
next @ main.ae9e094fcbca7d0d.js:1
emit @ main.ae9e094fcbca7d0d.js:1
(anonymous) @ main.ae9e094fcbca7d0d.js:1
invoke @ polyfills.5ab4d973e79fe0e3.js:1
run @ polyfills.5ab4d973e79fe0e3.js:1
runOutsideAngular @ main.ae9e094fcbca7d0d.js:1
onHandleError @ main.ae9e094fcbca7d0d.js:1
handleError @ polyfills.5ab4d973e79fe0e3.js:1
runGuarded @ polyfills.5ab4d973e79fe0e3.js:1
i.microtaskDrainDone @ polyfills.5ab4d973e79fe0e3.js:1
L @ polyfills.5ab4d973e79fe0e3.js:1
invokeTask @ polyfills.5ab4d973e79fe0e3.js:1
S @ polyfills.5ab4d973e79fe0e3.js:1
D @ polyfills.5ab4d973e79fe0e3.js:1

polyfills.5ab4d973e79fe0e3.js:1 Uncaught TypeError: n.auth is not a function
    at 872.86323cbf178cf201.js:1:228031
    at T.invoke (polyfills.5ab4d973e79fe0e3.js:1:6555)
    at I.run (polyfills.5ab4d973e79fe0e3.js:1:1951)
    at Ho.runOutsideAngular (main.ae9e094fcbca7d0d.js:1:585774)
    at 872.86323cbf178cf201.js:1:228007
    at we (872.86323cbf178cf201.js:1:2513)
    at bd (872.86323cbf178cf201.js:1:227949)
    at G.project (872.86323cbf178cf201.js:1:228479)
    at G._next (main.ae9e094fcbca7d0d.js:1:335819)
    at G.next (main.ae9e094fcbca7d0d.js:1:317451)

If I comment the constructor code then the component throws no error. I never called an auth function in my code. Any help appreciated :)

Solution

  • Setting "aot": true in configurations object of angular.json fixed the issue.