FirebaseUI-Angular: TypeError: Cannot read property 'options' of undefined

Html

<h1>FirebaseUI-Angular Sample</h1>
<firebase-ui></firebase-ui> <!-- this error point-->
<button (click)="logout()">Logout</button>

Chrome console

core.js:6185 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'options' of undefined
TypeError: Cannot read property 'options' of undefined
    at new Ao (esm.js:359)
    at new FirebaseuiAngularLibraryService (firebaseui-angular.js:16)
    at Object.FirebaseuiAngularLibraryService_Factory [as factory] (firebaseui-angular.js:21)
    at R3Injector.hydrate (core.js:16865)
    at R3Injector.get (core.js:16617)
    at NgModuleRef$1.get (core.js:36024)
    at Object.get (core.js:33773)
    at getOrCreateInjectable (core.js:5805)
    at Module.ɵɵdirectiveInject (core.js:20861)
    at NodeInjectorFactory.FirebaseuiAngularLibraryComponent_Factory [as factory] (firebaseui-angular.js:108)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41344)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)

esm.js359 error point

... a=firebase.initializeApp({apiKey:a.app.options.apiKey,authDomain:a.app.options.authDomain} ...

My package.json dependencies…

  "dependencies": {
    "@angular/animations": "~9.1.0",
    "@angular/common": "~9.1.0",
    "@angular/compiler": "~9.1.0",
    "@angular/core": "~9.1.0",
    "@angular/fire": "^6.0.0",
    "@angular/forms": "~9.1.0",
    "@angular/material": "^9.2.0",
    "@angular/platform-browser": "~9.1.0",
    "@angular/platform-browser-dynamic": "~9.1.0",
    "@angular/router": "~9.1.0",
    "firebase": "^7.13.2",
    "firebaseui": "^4.5.0",
    "firebaseui-angular": "^4.1.0",
    "rxjs": "~6.5.5",
    "tslib": "^1.11.1",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.0",
    "@angular/cli": "~9.1.0",
    "@angular/compiler-cli": "~9.1.0",
    "@angular/language-service": "~9.1.0",
    "@babel/core": "^7.9.0",
    "@storybook/addon-actions": "^5.3.18",
    "@storybook/addon-links": "^5.3.18",
    "@storybook/addon-notes": "^5.3.18",
    "@storybook/addons": "^5.3.18",
    "@storybook/angular": "^5.3.18",
    "@types/jasmine": "~3.5.10",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^13.11.0",
    "babel-loader": "^8.1.0",
    "codelyzer": "^5.2.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.1.1",
    "karma-jasmine-html-reporter": "^1.5.3",
    "protractor": "~5.4.3",
    "ts-node": "~8.8.1",
    "tslint": "~6.1.1",
    "typescript": "~3.8.3",
    "@angular-devkit/architect": "0.901.0",
    "firebase-tools": "^8.0.1",
    "fuzzy": "^0.1.3",
    "inquirer": "^7.1.0",
    "inquirer-autocomplete-prompt": "^1.0.1"
  }

I just followed https://github.com/RaphaelJenni/FirebaseUI-Angular. What is the problem? Help me.

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 3
Comments: 18 (4 by maintainers)

Most upvoted comments

I have a possible fix, please check if this works for you: npm i firebaseui-angular@5.0.0-beta.0

RaphaelJenni on Apr 8, 2020

Looks like angularfire 6.0.0 introduced the problem. Went back to 5.4.2 to fix this problem

doublep563 on Apr 6, 2020

I have a possible fix, please check if this works for you: npm i firebaseui-angular@5.0.0-beta.0

The update works perfectly, thanks a lot!

WildBoni on Apr 17, 2020

@techster10173 yes, but this version is compatible with @angular/fire @6.0.0

RaphaelJenni on Apr 8, 2020

package.json

“@angular/fire”: “^5.4.2”,

doublep563 on Apr 7, 2020

I have a vague idea, but I’m very inexperienced with these frameworks so it’s mostly just a guess.

The crash log posted on this issue (which is the same one I’m seeing locally) mentions FirebaseuiAngularServiceLibrary whose constructor attempts to access the auth property of the AngularFireAuth object passed in. I wonder if it would be possible to instead access that property using firebase.auth() as I’ve seen elsewhere. (There may be other locations in the code where access to auth would have to be modified.)

I forked the repo to make that change, but I haven’t been able to test it locally yet. (I tried to npm install from my forked repo and npm link, but I couldn’t get it working.)

I’m hoping we can get some help from the author @RaphaelJenni, who would have a much better understanding than I of what’s actually going on here.

eeevanbbb on Apr 5, 2020