feat(module): Add a custom FirebaseApp name

Author: davideast

docs/1-install-and-setup.md

@@ -52,7 +52,7 @@ You should see a message that says *App works!*
 npm install angularfire2 firebase --save
 ```
 
-Now that you have a new project setup, install AngularFire 2 and Firebase from npm.
+Now that you have a new project setup, install AngularFire2 and Firebase from npm.
 
 ### 4. Setup @NgModule
 
@@ -86,6 +86,22 @@ export class AppModule {}
 
 ```
 
+### Custom FirebaseApp Names
+You can optionally provide a custom FirebaseApp name with `initializeApp`.
+
+```ts
+@NgModule({
+  imports: [
+    BrowserModule,
+    AngularFireModule.initializeApp(firebaseConfig, authConfig, 'my-app-name')
+  ],
+  declarations: [ AppComponent ],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+
 ### 5. Inject AngularFire
 
 Open `/src/app/app.component.ts`, and make sure to modify/delete any tests to get the sample working (tests are still important, you know):

docs/5-user-authentication.md

@@ -22,12 +22,12 @@ const myFirebaseConfig = {
   databaseURL: '<your-database-URL>',
   storageBucket: '<your-storage-bucket>',
   messagingSenderId: '<your-messaging-sender-id>'
-}
+};
 
 const myFirebaseAuthConfig = {
   provider: AuthProviders.Google,
   method: AuthMethods.Redirect
-}
+};
 
 @NgModule({
   imports: [
@@ -46,7 +46,7 @@ export class AppModule {}
 If you have setup authentication in bootstrap like above, then all you need to do
 is call login on `af.auth.login()`
 
-The long exception is if you're using username and password, then you'll have
+The lone exception is if you're using username and password, then you'll have
 to call `af.auth.login()` with the user's credentials.
 
 ```ts
@@ -102,7 +102,7 @@ authentication in the bootstrap phase, you can still override the configuration.
 af.auth.login({
   provider: AuthProviders.Anonymous,
   method: AuthMethods.Anonymous,
-})
+});
 
 // Email and password
 af.auth.login({
@@ -112,19 +112,19 @@ af.auth.login({
 {
   provider: AuthProviders.Password,
   method: AuthMethods.Password,
-})
+});
 
 // Social provider redirect
 af.auth.login({
   provider: AuthProviders.Twitter,
   method: AuthMethods.Redirect,
-})
+});
 
 // Social provider popup
 af.auth.login({
   provider: AuthProviders.Github,
   method: AuthMethods.Popup,
-})
+});
 ```
 
 **Example app:**

src/angularfire2.spec.ts

@@ -20,17 +20,18 @@ import { Subscription } from 'rxjs/Subscription';
 import { COMMON_CONFIG, ANON_AUTH_CONFIG } from './test-config';
 
 describe('angularfire', () => {
-  var subscription:Subscription;
-  var app: firebase.app.App;
-  var rootRef: firebase.database.Reference;
-  var questionsRef: firebase.database.Reference;
-  var listOfQuestionsRef: firebase.database.Reference;
-  var angularFire2: AngularFire;
+  let subscription:Subscription;
+  let app: firebase.app.App;
+  let rootRef: firebase.database.Reference;
+  let questionsRef: firebase.database.Reference;
+  let listOfQuestionsRef: firebase.database.Reference;
+  let angularFire2: AngularFire;
+  const APP_NAME = 'super-awesome-test-firebase-app-name';
 
   beforeEach(() => {
 
     TestBed.configureTestingModule({
-      imports: [AngularFireModule.initializeApp(COMMON_CONFIG, ANON_AUTH_CONFIG)]
+      imports: [AngularFireModule.initializeApp(COMMON_CONFIG, ANON_AUTH_CONFIG, APP_NAME)]
     });
 
     inject([FirebaseApp, AngularFire], (firebaseApp: firebase.app.App, _af: AngularFire) => {
@@ -71,6 +72,9 @@ describe('angularfire', () => {
   describe('FirebaseApp', () => {
     it('should provide a FirebaseApp for the FirebaseApp binding', () => {
       expect(typeof app.delete).toBe('function');
+    });
+    it('should have the provided name', () => {
+      expect(app.name).toBe(APP_NAME);
     })
   });
 

src/angularfire2.ts

@@ -11,7 +11,8 @@ import {
   FirebaseApp,
   WindowLocation,
   FirebaseUserConfig,
-  FirebaseAuthConfig
+  FirebaseAuthConfig,
+  FirebaseAppName
 } from './tokens';
 import {
   APP_INITIALIZER,
@@ -43,14 +44,14 @@ import {
 @Injectable()
 export class AngularFire {
   constructor(
-    @Inject(FirebaseConfig) private firebaseConfig:string,
+    @Inject(FirebaseConfig) private firebaseConfig:FirebaseAppConfig,
     public auth: AngularFireAuth,
     public database: AngularFireDatabase) {}
 }
 
-export function _getFirebase(config: FirebaseAppConfig): firebase.app.App {
+export function _getFirebase(config: FirebaseAppConfig, appName: string): firebase.app.App {
   try {
-    return firebase.initializeApp(config);
+    return firebase.initializeApp(config, appName);
   }
   catch (e) {
     return firebase.app(null);
@@ -79,7 +80,7 @@ export const COMMON_PROVIDERS: any[] = [
   {
     provide: FirebaseApp,
     useFactory: _getFirebase,
-    deps: [FirebaseConfig]
+    deps: [FirebaseConfig, FirebaseAppName]
   },
   AngularFireAuth,
   AngularFire,
@@ -106,23 +107,24 @@ export const FIREBASE_PROVIDERS:any[] = [
 export const defaultFirebase = (config: FirebaseAppConfig): any => {
   return [
     { provide: FirebaseUserConfig, useValue: config },
-	{ provide: FirebaseConfig, useFactory: _getDefaultFirebase, deps: [FirebaseUserConfig] }
+    { provide: FirebaseConfig, useFactory: _getDefaultFirebase, deps: [FirebaseUserConfig] }
   ]
 };
 
 @NgModule({
-	providers: FIREBASE_PROVIDERS
+  providers: FIREBASE_PROVIDERS
 })
 export class AngularFireModule {
-  static initializeApp(config: FirebaseAppConfig, authConfig?:AuthConfiguration): ModuleWithProviders {
+  static initializeApp(config: FirebaseAppConfig, authConfig?: AuthConfiguration, appName?: string): ModuleWithProviders {
     return {
-		ngModule: AngularFireModule,
-		providers: [
-		  { provide: FirebaseUserConfig, useValue: config },
-		  { provide: FirebaseConfig, useFactory: _getDefaultFirebase, deps: [FirebaseUserConfig] },
-      { provide: FirebaseAuthConfig, useValue: authConfig }
-		]
-	}
+      ngModule: AngularFireModule,
+      providers: [
+        { provide: FirebaseUserConfig, useValue: config },
+        { provide: FirebaseConfig, useFactory: _getDefaultFirebase, deps: [FirebaseUserConfig] },
+        { provide: FirebaseAuthConfig, useValue: authConfig },
+        { provide: FirebaseAppName, useValue: appName }
+      ]
+    }
   }
 }
 

src/tokens.ts

@@ -4,6 +4,7 @@ export const FirebaseConfig = new OpaqueToken('FirebaseUrl');
 export const FirebaseApp = new OpaqueToken('FirebaseApp')
 export const FirebaseAuthConfig = new OpaqueToken('FirebaseAuthConfig');
 export const FirebaseUserConfig = new OpaqueToken('FirebaseUserConfig');
+export const FirebaseAppName = new OpaqueToken('FirebaseAppName');
 export const WindowLocation = new OpaqueToken('WindowLocation');
 // TODO: Deprecate
 export const FirebaseRef = FirebaseApp;