FirebaseUi-Angular
Installation
To install this library, run:
$ npm install firebaseui-angular --save
To run this library you need to have AngularFire2, Firebase, FirebaseUI-Web installed. Fast install:
$ npm install firebase firebaseui @angular/fire firebaseui-angular --save
How to use
Add the FirebaseUIModule
with the config to your imports. Make sure you have initialized AngularFire correctly.
;;;;;; ;;;// 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:; ;; ;
Add the firebaseui css to your imports:
Option 1: CSS Import
May be incompatible with older browsers.
Import the firebaseui css to your src/styles.css
file:
;
Option 2: Angular-CLI
File: angular.json
Path: "node_modules/firebaseui/dist/firebaseui.css"
Option 3: HTML Link
Put this in the <head>
tag of your index.html
file:
Make sure the version number matches the version of firebaseui you have installed with npm.
Once everything is set up, you can use the component in your Angular application:
<firebase-ui></firebase-ui>
Configuration
For the configuration of the module see the official firebaseui documentation: Config
If you use a version prior to 3.3.0 check the old README
Listen to auth state changes
this.angularFireAuth.authState.subscribethis.firebaseAuthChangeListener; private firebaseAuthChangeListenerresponse
Don't forget to unsubscribe at the end.
Sign-in success / failure callbacks
successCallbacksignInSuccessData: FirebaseUISignInSuccessWithAuthResult errorCallbackerrorData: FirebaseUISignInFailure
Disable autosign
constructorprivate firebaseuiAngularLibraryService: FirebaseuiAngularLibraryService
Sample
There is a sample project in the root folder.
- Just replace the firebase config in
src\environments\environment.ts
. - Run
npm install
- Run
npm run build-lib
- Run
ng serve
Development
The library sources are in projects/firebaseui/angular/library
.
To generate all *.js
, *.d.ts
and *.metadata.json
files:
$ npm run build-lib
To lint all *.ts
files:
$ 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
)
ERROR in ./~/firebase/app/shared_promise.js
This is a know issue in the firebase project. To fix that (for now), do that:
npm install promise-polyfill --save-exact
http://localhost:4200/images/buffer.svg?embed
404 (Not Found)
Put this into your styles.scss file:
@supports (-webkit-appearance:none) {
.mdl-progress:not(.mdl-progress--indeterminate):not(.mdl-progress--indeterminate) > .auxbar,
.mdl-progress:not(.mdl-progress__indeterminate):not(.mdl-progress__indeterminate) > .auxbar {
mask: url(/assets/images/buffer.svg?embed) !important;
}
}
and put a buffer.svg
file into assets/images
.
This will stop this error message.
License
MIT © Raphael Jenni