Ionic - Angular 6 - Object(...) is not a function Error

[yushinzm]

Uncaught TypeError: Object(...) is not a function at firebaseui-angular.js:32 at Object.<anonymous> (firebaseui-angular.js:34) at __webpack_require__ (bootstrap 095e03a32831a77e10bd:54) at Object.450 (main.ts:5) at __webpack_require__ (bootstrap 095e03a32831a77e10bd:54) at Object.331 (main.ts:1) at __webpack_require__ (bootstrap 095e03a32831a77e10bd:54) at webpackJsonpCallback (bootstrap 095e03a32831a77e10bd:25) at main.js:1

[RaphaelJenni]

Please add some more information and provide a demo if possible.

[salmoro]

I'm getting this too. See image below.

This error reminds me of something I'd get on angular libs that depend on ^rxjs6 but an older version of rxjs is installed. In my case I have rxjs 6.3.3 installed. Here are some of my installed packages:

"dependencies": { ... "@angular/animations": "^5.2.9", "@angular/cdk": "^5.2.4", "@angular/common": "5.0.3", "@angular/compiler": "5.0.3", "@angular/compiler-cli": "5.0.3", "@angular/core": "5.0.3", "@angular/fire": "^5.1.1", "@angular/forms": "5.0.3", "@angular/http": "5.0.3", "@angular/material": "^5.2.4", "@angular/platform-browser": "5.0.3", "@angular/platform-browser-dynamic": "5.0.3", "firebase": "^5.7.0", "firebaseui": "^3.5.0", "firebaseui-angular": "^3.3.3", "ionic-angular": "3.9.2", "rxjs": "^6.3.3", "rxjs-compat": "^6.3.3", }

[RaphaelJenni]

@salmoro Thanks for the details. Is this a recent bug? Did something change with your dependencies? Maybe the new firebaseui version?

[salmoro]

@RaphaelJenni Thanks for the prompt replies. This is my first time installing this on this project so I can't narrow it down to a specific change. I just tried rolling back several versions on firebaseui and firebaseui-angular and the issue still prevails. Lmk if there's anything else you'd like me to try or provide you with. Thanks

[salmoro]

I've just did a quick test and started two new Ionic projects one with Ionic-v3 (as above) and the other with Ionic-v4 (angular7) and on both of them I've added the same firebaseui-angular-related packages and did the same import in app.module.ts. The results are that on v3 I got the same error as reported here and on v4 I haven't. I'm suspecting this might suggest that this issue is related to older angular versions.

[salmoro]

More simply, I've upgraded my project to "@angular/core": "^7.1.4" and all is well

[emgie123]

Sam for me, also using those libs for the first time with Ionic3 project. I`ve got: { ... "firebase": "^5.7.1", "firebaseui": "^3.5.1", "firebaseui-angular": "^3.3.3", "promise-polyfill": "^8.1.0", //added to check if it will work "rxjs": "^6.3.3", //updated to check if it will work "rxjs-compat": "^6.3.3", //added to check if it will work ... }

But I can't update to ionic4 and need to stay with v3. As mentioned I have upgraded the rxjs however Idk if it is a good idea for compatibility reasons

[RaphaelJenni]

Hi, sorry to hear that. I've never worked with ionic. But I will test it with an older angular version and try to fix it in the near future.

[RaphaelJenni]

I tested it with ng-cli version 6.2.9 and it worked. I'll attach all my versions below.

{
  "name": "firebase-uing6-test",
  "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": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/fire": "^5.1.1",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "core-js": "^2.5.4",
    "firebase": "^5.7.2",
    "firebaseui": "^3.5.1",
    "firebaseui-angular": "^3.3.3",
    "rxjs": "~6.2.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.9",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  }
}

I attached my project. You can run it with:

1. npm ci
2. Update the environement.ts file with your firebase credentials.
3. npx ng serve (To run the project with the project local version)

FirebaseUI-NG6Test.zip

[RaphaelJenni]

Closing due to inactivity. Please reopen if necessary.