Firebaseui-web: Can't resolve firebase and firebaseui while building with AOT

[RaphaelJenni]

[REQUIRED] Describe your environment

• Operating System version: Ubuntu 18.04.1 LTS
• Browser version: Chrome 69.0.3497.81
• Firebase UI version: 3.4.0
• Firebase SDK version: 5.4.2

[REQUIRED] Describe the problem

While building a project with AOT. The modules can't be resolved.

ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'firebase/index' in '/home/Projects/GitHub/FirebaseUI-Angular/src/app'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'firebaseui/dist/index' in '/home/Projects/GitHub/FirebaseUI-Angular/src/app'

Steps to reproduce:

Run the demo project of FirebaseUI-Angular with ng build --prod

Relevant Code:

src/app/app.module.ts

import * as firebase from 'firebase/app';
import * as firebaseui from 'firebaseui';

const firebaseUiAuthConfig: firebaseui.auth.Config = {
  signInFlow: 'popup',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    {
      scopes: [
        'public_profile',
        'email',
        'user_likes',
        'user_friends'
      ],
      customParameters: {
        'auth_type': 'reauthenticate'
      },
      provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID
    },
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID,
    {
      requireDisplayName: false,
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID
    },
    firebase.auth.PhoneAuthProvider.PROVIDER_ID,
    firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
  ],
  tosUrl: '<your-tos-link>',
  privacyPolicyUrl: '<your-privacyPolicyUrl-link>',
  credentialHelper: firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM
};

[bojeil-google]

I don't think the resolving problem is an issue with firebaseui. Regarding the loading glitch, we have a fix and we will try to push it out in the coming week.

[RaphaelJenni]

Exposing the two imports through the plugin somehow works. There must be an error with how aot resovles the dependencies

[sgehrman]

Is there a quick fix for this? Can I downgrade to an earlier version or change the code?

[sgehrman]

Here's the fix:

// currently there is a bug while building the app with --prod
// - https://github.com/RaphaelJenni/FirebaseUI-Angular/issues/76
// the plugin exposes the two libraries as well. You can use those:
import { FirebaseUIModule, firebase, firebaseui } from 'firebaseui-angular';

[LennyZ71]

@RaphaelJenni Getting this error now since angular 8.0.0. even with the exposed libraries.

npm.js:73 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)
    at __webpack_require__ (bootstrap:78)
    at Module../src/app/auth/auth.module.ts (app.module.ts:29)
    at __webpack_require__ (bootstrap:78)
    at Module../src/app/app.module.ts (app.component.ts:8)

[karlshaver]

I get the same error reported by @LennyZ71 _without_ using the above-mentioned "FirebaseUI-Angular". In a brand new Angular 8 project using the CLI, I get this error only after adding firebaseui.

@RaphaelJenni Getting this error now since angular 8.0.0. even with the exposed libraries.

npm.js:73 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)
    at __webpack_require__ (bootstrap:78)
    at Module../src/app/auth/auth.module.ts (app.module.ts:29)
    at __webpack_require__ (bootstrap:78)
    at Module../src/app/app.module.ts (app.component.ts:8)

[anisabboud]

To clarify, the console error reported above by @LennyZ71 is a new error.
It came with the release of Angular 8's differential loading feature.

ng build no longer works with the default setting "target": "es2015".
See more details here: https://github.com/RaphaelJenni/FirebaseUI-Angular/issues/93.

[cstsortan]

We solved it by dropping support for es5 entirely (A sacrifice we had to do anyways since we're using native custom elements for parts of our app, including wraping firebaseui)

[arjunyel]

@wti806 @bojeil-google the cannot read property Promise of undefined seems to have broken all the Angular 8 stuff, is there anything the community can do to help diagnose/fix? Thank you for your time/help!

[wti806]

I think the issue was because firebaseui npm package doesn't provide an es module. We added the es module in v4.1.0. Please update to firebaseui dependency in your package.json and try again. Thanks!

[BeSpunky]

v4.1.0 fixed the problem for me.

1. npm update firebaseui
2. Reverted target back to es2015 in tsconfig.json.

App successfully:

• compiles with --prod
• runs locally with --prod
• runs AOT compiled version on firebase

[duncanhunter]

Tried:

• Upgrading to "firebaseui": "^4.1.0"
• Setting "target": "es2015" in tsconfig.json
• Exposing the extra libraries in app.module import { FirebaseUIModule, firebase, firebaseui } from 'firebaseui-angular';

No combination removed the error. Running a brand new nx app with v8.

[duncanhunter]

Ok, I was configuring the firebaseUiAuthConfig in a separate file and not using firebase and firebaseui exposed from the library.

Working now.

[akauppi]

Can this be closed?