Wie kann ich Authentifizierung mit Firebase erhalten, um mit Angular2 FINAL zu arbeiten?

Question

Also habe ich auch auf Angular2 Final aufgerüstet. Ich habe die Migrationsprojektschritte gemacht, um alles zu verschieben. Ich bekomme keine Fehler, es authentifiziert sich. Das Problem tritt jedoch nach der Authentifizierung auf. Wenn es zurück auf die Seite umgeleitet wird, erhält es nicht diese köstlichen Authentifizierungsdaten. Es verhält sich so, als wäre ich nicht eingeloggt. Dies geschieht lokal und auf dem Firebase-Hosting. Ich habe überprüft, dass Cookies nicht blockiert werden. Ich habe die Authentifizierungsoptionen auf Facebook reduziert. Es funktioniert einfach nicht. Es war in Ordnung vor dem Finale. Die letzte Version war RC5.

Ich benutze Typescript 2.0.2.

Mein app.module sieht wie folgt aus:

import {BrowserModule} from '@angular/platform-browser'; 
import {NgModule, ApplicationRef} from '@angular/core'; 
import {CommonModule} from '@angular/common'; 
import {FormsModule} from '@angular/forms'; 
import {AppComponent} from './app.component'; 
import {CollapseDirective, DropdownDirective, DropdownToggleDirective, DropdownMenuDirective} from 'ng2-bootstrap'; 
import { 
    FIREBASE_PROVIDERS, 
    defaultFirebase, 
    AngularFire, 
    AuthMethods, 
    AuthProviders, 
    firebaseAuthConfig, AngularFireModule 
} from 'angularfire2'; 
import {RoomlyNavbarComponent} from './shared/roomly-navbar/roomly-navbar.component'; 
import {RoomlyRoomsComponent} from './roomly-rooms/roomly-rooms.component'; 
import {RoomlyHomeComponent} from './roomly-home/roomly-home.component'; 
import { 
    routing, 
    appRoutingProviders 
} from './app.routes'; 
import {RoomlyRoomComponent} from './roomly-room/roomly-room.component'; 
import {RoomlyPhotoUploaderComponent} from './roomly-photo-uploader/roomly-photo-uploader.component'; 
import {RoomlyItemComponent} from './roomly-item/roomly-item.component'; 
import {RoomlyBuildingComponent} from './roomly-building/roomly-building.component'; 
import {RoomlyBuildingsComponent} from './roomly-buildings/roomly-buildings.component'; 
import {BuildingFormComponent} from './building-form/building-form.component'; 

const myFirebaseConfig = { 
    apiKey: "REMOVED", 
    authDomain: "REMOVED", 
    databaseURL: "REMOVED", 
    storageBucket: "REMOVED", 
}; 

const myFirebaseAuthConfig = { 
    provider: AuthProviders.Facebook, 
    method: AuthMethods.Redirect 
}; 

@NgModule({ 
    declarations: [ 
     AppComponent, 
     CollapseDirective, 
     DropdownDirective, 
     DropdownToggleDirective, 
     DropdownMenuDirective, 
     RoomlyNavbarComponent, 
     RoomlyRoomsComponent, 
     RoomlyRoomComponent, 
     RoomlyHomeComponent, 
     RoomlyPhotoUploaderComponent, 
     RoomlyItemComponent, 
     RoomlyBuildingComponent, 
     RoomlyBuildingsComponent, 
     BuildingFormComponent, 
    ], 
    imports: [ 
     BrowserModule, 
     CommonModule, 
     FormsModule, 
     routing, 
     AngularFireModule.initializeApp(myFirebaseConfig, myFirebaseAuthConfig) 
    ], 
    providers: [appRoutingProviders], 
    entryComponents: [AppComponent], 
    bootstrap: [ 
     AppComponent, 
     RoomlyNavbarComponent 
     ] 
}) 
export class AppModule { 

} 

Mein app.component sieht wie folgt aus. Ich benutze Routen, also ist es ziemlich leer. Es lädt nur eine Seite, die die router-outlet und die navbar enthält:

import { Component } from '@angular/core'; 
import * as firebase from 'firebase'; 
import { AngularFire, FirebaseListObservable } from 'angularfire2'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'] 
}) 
export class AppComponent { 
    constructor(public af: AngularFire) { 
    } 
} 

Schließlich ist die Startseite, wo die eigentliche Protokollierung an Orten nimmt wie folgt aussieht:

import {Component, OnInit} from '@angular/core'; 
import {AngularFire, AuthProviders, AuthMethods} from 'angularfire2'; 
import {AuthUser} from '../shared/AuthUser'; 

@Component({ 
    selector: 'app-roomly-home', 
    templateUrl: 'roomly-home.component.html', 
    styleUrls: ['roomly-home.component.css'] 
}) 
export class RoomlyHomeComponent implements OnInit { 

    ngOnInit() { 
    } 

    user = {}; 
    authUser: AuthUser = new AuthUser('', ''); 
    loggedin: boolean; 

    constructor(public af: AngularFire) { 
     this.af.auth.subscribe(auth => console.log('hello ', auth)); 
     this.af.auth.subscribe(user => { 
      if (user) { 
       // user logged in 
       this.user = user; 
       this.loggedin = true; 
      } 
      else { 
       // user not logged in 
       this.user = {}; 
       this.loggedin = false; 
      } 
     }); 
    } 

    login() { 
     this.af.auth.login(); 
    } 

    loginFacebook() { 
     this.af.auth.login({ 
      provider: AuthProviders.Facebook, 
      method: AuthMethods.Popup 
     }); 
    } 

    loginGoogle() { 
     this.af.auth.login({ 
      provider: AuthProviders.Google, 
      method: AuthMethods.Popup 
     }); 
    } 

    loginTwitter() { 
     this.af.auth.login({ 
      provider: AuthProviders.Twitter, 
      method: AuthMethods.Popup 
     }); 
    } 

    logout() { 
     this.af.auth.logout(); 
    } 


} 

Ich bin nicht sicher, was sich geändert zwischen RC5 und Final, damit es fehlschlägt. Wenn es hilft, hier ist meine package.json Datei:

{ 
    "name": "Roomly Home Inventory", 
    "version": "0.0.0", 
    "license": "MIT", 
    "angular-cli": {}, 
    "scripts": { 
    "start": "ng serve", 
    "lint": "tslint \"src/**/*.ts\"", 
    "test": "ng test", 
    "pree2e": "webdriver-manager update", 
    "e2e": "protractor" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/common": "2.0.0", 
    "@angular/compiler": "2.0.0", 
    "@angular/core": "2.0.0", 
    "@angular/forms": "2.0.0", 
    "@angular/http": "2.0.0", 
    "@angular/platform-browser": "2.0.0", 
    "@angular/platform-browser-dynamic": "2.0.0", 
    "@angular/router": "3.0.0", 
    "angularfire2": "^2.0.0-beta.4", 
    "core-js": "^2.4.1", 
    "firebase": "^3.4.0", 
    "ng2-bootstrap": "^1.1.4", 
    "rxjs": "5.0.0-beta.12", 
    "ts-helpers": "^1.1.1", 
    "zone.js": "^0.6.23" 
    }, 
    "devDependencies": { 
    "@types/jasmine": "^2.2.30", 
    "angular-cli": "1.0.0-beta.14", 
    "codelyzer": "~0.0.26", 
    "jasmine-core": "2.4.1", 
    "jasmine-spec-reporter": "2.5.0", 
    "karma": "1.2.0", 
    "karma-chrome-launcher": "^2.0.0", 
    "karma-cli": "^1.0.1", 
    "karma-jasmine": "^1.0.2", 
    "karma-remap-istanbul": "^0.2.1", 
    "protractor": "4.0.5", 
    "ts-node": "1.2.1", 
    "tslint": "3.13.0", 
    "typescript": "2.0.2" 
    } 
} 

Hat jemand anderes über das laufen?

Answer 1

Ok, reparierte es. Es gibt zwei Schritte.

1. Upgrade auf angularfire2@2.0.0-beta.5-preview
2. npm install @types/request@0.0.30
3. Profit.

Das löste das Problem und alles funktioniert jetzt. :)