Workaround for --prod build error #76

Author: RaphaelJenni

README.MD

@@ -30,11 +30,19 @@ import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {AppComponent} from './app.component';
-import {FirebaseUIModule} from 'firebaseui-angular';
 import {environment} from '../environments/environment';
 import {AppRoutingModule} from './app-routing.module';
-import * as firebase from 'firebase/app/dist/index.esm';
-import * as firebaseui from 'firebaseui/dist/firebaseui.js';
+
+
+import {FirebaseUIModule} from 'firebaseui-angular';
+import * as firebase from 'firebase/app';
+import * as firebaseui from 'firebaseui';
+// 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';
+
+
 import {AngularFireModule} from '@angular/fire';
 import {AngularFireAuthModule} from '@angular/fire/auth';
 
@@ -222,6 +230,18 @@ $ npm run lint
 There are test files, but they are empty at the moment.
 
 ## Troubleshoot
+### Prod build error
+```
+ERROR in ./src/app/app.module.ngfactory.js
+Module not found: Error: Can't resolve 'firebase/index' in '...'
+ERROR in ./src/app/app.module.ngfactory.js
+Module not found: Error: Can't resolve 'firebaseui/dist/index' in '...'
+```
+
+Use the firebase and firebaseui instances exposed by the plugin:
+
+`import {..., firebase, firebaseui} from 'firebaseui-angular';`
+
 ### CSS not loaded
 If you have added the css to the angular.json but nothing happened. Try to restart the server (`Ctrl-C` and `ng serve`)
 

projects/firebaseui-angular-library/src/lib/firebaseui-angular-library.helper.ts

@@ -3,9 +3,12 @@
  * Copyright (c) 2017 Raphael Jenni
  */
 
-import * as firebase from 'firebase';
+import * as firebaseOriginal from 'firebase/app';
 import UserCredential = firebase.auth.UserCredential;
-import * as firebaseui from 'firebaseui';
+import * as firebaseuiOriginal from 'firebaseui';
+
+export const firebase = firebaseOriginal;
+export const firebaseui = firebaseuiOriginal;
 
 /**
  * @deprecated Please use native configuration of firebaseui (firebaseui.auth.Config)
@@ -25,7 +28,7 @@ export class FirebaseUIAuthConfig {
   disableSignInSuccessCallback?: boolean;
 }
 
-export type NativeFirebaseUIAuthConfig = firebaseui.auth.Config;
+export type NativeFirebaseUIAuthConfig = firebaseuiOriginal.auth.Config;
 
 
 export class FirebaseUISignInSuccessWithAuthResult {
@@ -35,15 +38,15 @@ export class FirebaseUISignInSuccessWithAuthResult {
 
 export class FirebaseUISignInFailure {
   code: string;
-  credential: firebase.auth.AuthCredential;
+  credential: firebaseOriginal.auth.AuthCredential;
 }
 
 /**
  * @deprecated Use {@link FirebaseUISignInSuccessWithAuthResult}
  */
 export class FirebaseUISignInSuccess {
-  currentUser: firebase.User;
-  credential: firebase.auth.AuthCredential;
+  currentUser: firebaseOriginal.User;
+  credential: firebaseOriginal.auth.AuthCredential;
   redirectUrl: string;
 }
 

src/app/app.module.ts

@@ -2,14 +2,13 @@ import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {AppComponent} from './app.component';
-import {FirebaseUIModule} from 'firebaseui-angular';
+import {FirebaseUIModule, firebase, firebaseui} from 'firebaseui-angular';
 import {environment} from '../environments/environment';
 import {AppRoutingModule} from './app-routing.module';
-import * as firebase from 'firebase/app';
-import * as firebaseui from 'firebaseui';
 import {AngularFireModule} from '@angular/fire';
 import {AngularFireAuthModule} from '@angular/fire/auth';
 
+
 const firebaseUiAuthConfig: firebaseui.auth.Config = {
   signInFlow: 'popup',
   signInOptions: [