Using angularfire2 with this starter

Hey,
I am using Angular2 webpack with Firebase for developing my application. Hence I am using this starter to build the entire application.

I searched through documentation for using firebase or angularfire2 with this but could not find any. The present angularfire2 docs use angular-cli & don't work with this.

Could you please help?

Thanks,
Rahul

@beckmeindia

@beckmeindia what are you trying to accomplish? This starter is for Angular Universal not AngularFire.

@beckmeindia

@beckmeindia I think you might be in the wrong repo? https://github.com/angular/angularfire2
Documentation is on https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md

@joaogarin

@joaogarin thank you. I was referring to the wrong docs.

@manekinekko

Hey,
I am trying to integrate angularfire2 with this starter. Apparently I keep getting an error AngularFire not found, as it is running on the server side. The setup seems to be fine for webpack. I don't know how to bypass this problem of server-side and make it work with this starter.

Could any of you give ideas about a workaround for it? @manekinekko

I have attached the repository here: https://github.com/beckmeindia/universal-angularfire2

I have also tried to address this issue here: r-park/todo-angular-firebase#77 (comment)

Thanks,
Rahul

@beckmeindia

@beckmeindia I am gonna take a look at your issue tonight. I'll let you know.

@beckmeindia

Thank you so much Wassim
On 26 Jul 2016 19:34, "Wassim Chegham" notifications@github.com wrote:

@beckmeindia https://github.com/beckmeindia I am gonna take a look at
your issue tonight. I'll let you know.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#127 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQo6KAxs2GjaL9_q-_UOLOyuINYrMhASks5qZhP9gaJpZM4JSrx_
.

@beckmeindia

@beckmeindia I did some diggings. Here are my tldr: We simply need to add support for AngularFire2.

My analysis:

One of the issues is coming from the FirebaseSdkAuthBackend implementation which requests this._fbAuth = _fbApp.auth();. However, _fbApp.auth() doesn't seem to work (??); and then this.-fbAuth is NULL all the way down.

Here are the steps to reproduce this issue:

instead of providing FIREBASE_PROVIDERS,
provide these 2 deps:

COMMON_PROVIDERS,
{provide: AuthBackend, useClass: MockedAuthBackend}

And then provide a custom implementation with stubbed methods, something like:

class MockedAuthBackend {
   onAuth() {
     return null;
  }
}

Following the base parent class:

export declare abstract class AuthBackend {
    abstract authWithCustomToken(token: string): Promise<FirebaseAuthState>;
    abstract authAnonymously(options?: any): Promise<FirebaseAuthState>;
    abstract authWithPassword(credentials: EmailPasswordCredentials): Promise<FirebaseAuthState>;
    abstract authWithOAuthPopup(provider: AuthProviders, options?: any): Promise<firebase.auth.UserCredential>;
    abstract authWithOAuthRedirect(provider: AuthProviders, options?: any): Promise<void>;
    abstract authWithOAuthToken(credentialsObj: firebase.auth.AuthCredential, options?: any): Promise<FirebaseAuthState>;
    abstract onAuth(): Observable<FirebaseAuthState>;
    abstract getAuth(): FirebaseAuthState;
    abstract unauth(): void;
    abstract createUser(credentials: EmailPasswordCredentials): Promise<FirebaseAuthState>;
    abstract getRedirectResult(): Observable<firebase.auth.UserCredential>;
}

But then you will end up with other errors, like this one:

So basically, we need a universal AuthBackend implementation.

Getting @davideast in the loop ^^

@manekinekko

@manekinekko Hey Wassem thanks a lot for your time and debugging. Will look forward to changes in the universal Authbackend by @davideast and try to implement what you have said & see if it somehow maybe works.

Also could I add you as a collaborator to the present repository so that we can commit new changes and maybe make it a universal-angularfire2-starter ?

Cheers,
Rahul

@beckmeindia

@beckmeindia sure

@manekinekko

hey @manekinekko & @davideast
Any updates for the auth implementation?
Really excited to implement it on my website!

@davideast

Others interested in this as well. aspnet/JavaScriptServices#268
Hopefully we can get this in for 1.0 if it's not too involving? @davideast

@davideast

Hi, I observed that the new angular2-webpack-starter has a very simple approach for integrating Angularfire2 through this:
add 'firebase' to tsconfig.json file.
install typescript 2.0.0 npm install typescript@2.0.0 --save
install angularfire with npm install angularfire2@next -- save
add "firebase" to types array in tsconfig in the module
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
],
"types": [
"jasmine",
"firebase"
]
}
}

I have observed that the universal-starter uses an earlier version of angular2-webpack-starter.
Could you suggest a way to upgrade to the new angular2-webpack?
@davideast @MarkPieszak @manekinekko

@manekinekko

Hey @manekinekko
Does the new update to rc6 solves the problem we were facing with Auth earlier?

Excited to hear about it

@manekinekko

@manekinekko what is the current status of this issue? I am just catching up on open problems and it seems like there was some back and forth on this as we were playing catchup with the angular release. Can you check again on this when you get a chance and let me know?

@manekinekko

I just checked with the updated versions of angularfire2 and angular-universal-nodejs.

It works perfectly fine with all the observables and authentication. So it's resolved.

Thank you so much guys!
@manekinekko @jeffwhelpley @MarkPieszak

is anywhere a starter project for angular universal with angularfire? Is am still struggling with it

Does universal play well with angularfire2? I see from angular/angularfire#191 that it looks like some custom code is needed and using the firebase nodejs version on the server..is that so?

@doczoidberg

@doczoidberg @joaogarin can you share some logs or error messages?

I didn't actually try it yet..but I am thinking about using firebase, and if that is a good idea at this point..I will definitely be using universal.

I will try to get some tests running and see what happens. I will report back with what I find.

Hello,

Just out of curiosity I tried putting angularfire2 into this repository and I get the following error :

Error: Unexpected value '[object Object]' imported by the module 'AppModule'
    at /Library/WebServer/Documents/universal-starter/dist/server/index.js:20332

This was trying to put the Angularfire2 module into the appModule. I guess it could be done via the browsermodule, but then its not possible to inject the angularfire2 service into components that ideally would be render on client and server..basically would be like maintaining two separate apps for server and client which is not so interesting maybe.

I think it would be super interesting to have even if just a recommendation on the universal repo on how to use angularfire2 with angular using universal, best practices or something like that.

@joaogarin

@joaogarin instead of importing AngularFireModule you could provide a substitute for AngularFire service in your app.node.module.

class AngularFireServer{
  constructor(){}
  ...
}
export function createAngularFireServer(){
  return new AngularFireServer();
}

@NgModule({
  bootstrap: [SiteComponent],
  imports: [
       ... // module imports
  ]
  providers: [
       ...
       {provide: 'req', useFactory: getRequest},
       {provide: AngularFire, useFactory: createAngularFireServer},
       ...
   ]
})

I mainly use AngularFire / Firebase for Auth.
In this AngularFireServer I use the req to get a cookie and do authentication with the JWT in it..

My AngularFireServer roughly looks like this:

import { Inject } from '@angular/core';
import { ReplaySubject } from 'rxjs/ReplaySubject';

export class AngularFireServer {

  auth$ = new ReplaySubject(1);
  auth = this.auth$.asObservable();

  constructor(@Inject('req') private req: any) {

    let token = this.req.cookies['token'];
    let user;
    if (token) {
      user = {
        auth: {
          getToken: () => {
            return new Promise((resolve) => {
              resolve(token)
            });
          }
        }
      };
    }

    this.auth$.next(user);

  }
  
}

Yeah thats what I am doing now, essencialy have a provider for browser and server =) bit of DI swap magic and it works 👍

+1. Any update on the possibility of using Universal with angularfire2 4.0.0-rc.0? There is a reference to window in database.js that does not seem to allow this.

I didn't tries with dB, but auth seems to work fine

Navigation Menu

Repository navigation

Using angularfire2 with this starter #127

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Using angularfire2 with this starter #127

Description

Activity

manekinekko commented on Jul 22, 2016

joaogarin commented on Jul 22, 2016

beckmeindia commented on Jul 23, 2016

beckmeindia commented on Jul 26, 2016

manekinekko commented on Jul 26, 2016

beckmeindia commented on Jul 26, 2016

manekinekko commented on Jul 26, 2016

beckmeindia commented on Jul 27, 2016

manekinekko commented on Jul 27, 2016

beckmeindia commented on Aug 3, 2016

MarkPieszak commented on Aug 18, 2016

beckmeindia commented on Aug 24, 2016

beckmeindia commented on Sep 14, 2016

jeffwhelpley commented on Oct 3, 2016

beckmeindia commented on Oct 19, 2016

doczoidberg commented on Dec 4, 2016

joaogarin commented on Feb 8, 2017

manekinekko commented on Feb 8, 2017

joaogarin commented on Feb 8, 2017

joaogarin commented on Feb 12, 2017

samvloeberghs commented on Mar 19, 2017

joaogarin commented on Mar 19, 2017

michaelwaihenya commented on May 9, 2017

samvloeberghs commented on May 10, 2017

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions