FirebaseUI-Angular: build error with Angular 8.0.0 (TypeError: Cannot read property 'Promise' of undefined)

I updated my project to the latest Angular 8.0.0, @angular/fire 5.2.0-rc.1, firebase 6.1.0, firebaseui 4.0.0, firebaseui-angular 3.4.2.

ng serve works well. With ng build or ng build --prod, the build succeeds but I get a console error.

Uncaught TypeError: Cannot read property 'Promise' of undefined
    at da (npm.js:73)
    at npm.js:74
    at npm.js:425
    at Object../node_modules/firebaseui/dist/npm.js (npm.js:425)
    at __webpack_require__ (bootstrap:78)
    at Module../node_modules/firebaseui-angular/fesm2015/firebaseui-angular.js (firebaseui-angular.js:1)

image

Not sure where the issue is (haven’t yet tried to reproduce on a clean project). It might have to do with the Differential Loading introduced in Angular 8 (of the dialog polyfill). https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27

Update: Disabling differential loading (by setting "target": "es5" in tsconfig.json), resolves the error.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 9
  • Comments: 16 (4 by maintainers)

Commits related to this issue

Most upvoted comments

for me locally all works fine just on deploying to firebase hosting gives this error.

Same for me as well

However following workaround works.

If you switch target to “es5” in tsconfig.json (turns off differential loading), and run ng build again, the page loads fine.

I created a beta version where the plugin is built with the angular 8 cli. PLease give it a try: npm install firebaseui-angular@4.0.0-beta.0

for me locally all works fine just on deploying to firebase hosting gives this error.

{ “name”: “admin”, “version”: “0.0.0”, “scripts”: { “ng”: “ng”, “start”: “ng serve”, “build”: “ng build”, “test”: “ng test”, “lint”: “ng lint”, “e2e”: “ng e2e” }, “private”: true, “dependencies”: { “@angular/animations”: “^8.0.0”, “@angular/cdk”: “^8.0.0”, “@angular/common”: “~8.0.0”, “@angular/compiler”: “~8.0.0”, “@angular/core”: “~8.0.0”, “@angular/fire”: “^5.2.1”, “@angular/flex-layout”: “^8.0.0-beta.26”, “@angular/forms”: “~8.0.0”, “@angular/material”: “^8.0.0”, “@angular/platform-browser”: “~8.0.0”, “@angular/platform-browser-dynamic”: “~8.0.0”, “@angular/router”: “~8.0.0”, “angular-gridster2”: “^8.0.0”, “angularfire2”: “^5.0.0-rc.10”, “chart.js”: “^2.8.0”, “firebase”: “^5.11.1”, “firebaseui”: “^4.0.0”, “firebaseui-angular”: “^3.4.2”, “ng2-charts”: “^2.3.0”, “rxjs”: “~6.4.0”, “tslib”: “^1.9.0”, “zone.js”: “~0.9.1” }, “devDependencies”: { “@angular-devkit/build-angular”: “~0.800.0”, “@angular/cli”: “~8.0.1”, “@angular/compiler-cli”: “~8.0.0”, “@angular/language-service”: “~8.0.0”, “@types/node”: “~8.9.4”, “@types/jasmine”: “~3.3.8”, “@types/jasminewd2”: “~2.0.3”, “codelyzer”: “^5.0.0”, “jasmine-core”: “~3.4.0”, “jasmine-spec-reporter”: “~4.2.1”, “karma”: “~4.1.0”, “karma-chrome-launcher”: “~2.2.0”, “karma-coverage-istanbul-reporter”: “~2.0.1”, “karma-jasmine”: “~2.0.1”, “karma-jasmine-html-reporter”: “^1.4.0”, “protractor”: “~5.4.0”, “ts-node”: “~7.0.0”, “tslint”: “~5.15.0”, “typescript”: “~3.4.3” } }

Thank you @RaphaelJenni, but unfortunately the new beta didn’t resolve the issue for me.

Seems like @LennyZ71 reported the same error here: https://github.com/firebase/firebaseui-web/issues/501#issuecomment-499984586.

I am able to reproduce with a fresh project created with Angular CLI 8.0.2:

  • ng new ng8project
  • npm install firebase firebaseui @angular/fire firebaseui-angular@4.0.0-beta.0 --save
  • app.module.ts contents from the README https://github.com/RaphaelJenni/FirebaseUI-Angular
  • ng build (not serve)
  • live-server dist/ng8project/ --entry-file=index.html, then open http://localhost:8080/
  • Uncaught TypeError: Cannot read property 'Promise' of undefined error in the console

If you switch target to "es5" in tsconfig.json (turns off differential loading), and run ng build again, the page loads fine.

PandiyanCool thank you so much. I have been on the verge of giving up trying to build with Angular having now spent several months through Angular 6, 7 then 8 without being able to complete a project. I have struggled for several days now with my app working locally but not on deployment. Your work around switching the target to ES5 from ES2015 worked for me. Onwards and upwards.

Hi @anisabboud,

v4.1.0 fixed the problem for me.

Not sure if this is related, but how did you update your firebaseui package? Try npm update firebaseui. It seemed to have updated firebase as well.

FirebaseUI added a es module in v4.1.0. Please upgrade to that version, it should solve the issue.

@anisabboud Thanks for the report. I’ll check it out