Using angularfire2 with this starter

[beckmeindia]

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

[manekinekko]

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

[joaogarin]

@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

[beckmeindia]

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

[beckmeindia]

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

[manekinekko]

@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_
.

[manekinekko]

@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:

1. instead of providing FIREBASE_PROVIDERS,
2. 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 ^^

[beckmeindia]

@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

[manekinekko]

@beckmeindia sure

[beckmeindia]

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

[MarkPieszak]

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

[beckmeindia]

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