0

それで、私も Angular2 Final にアップグレードしました。移行プロジェクトの手順を実行して、すべてを移行しました。エラーはゼロです。認証されます。ただし、問題は認証後に発生します。ページにリダイレクトされると、おいしい認証データが取得されません。ログインしていないように動作します。これは、ローカルで発生しており、firebase ホスティングでも発生しています。Cookie をブロックしていないことを再確認しました。認証オプションを削除して、Facebook だけにしました。うまくいきません。ファイナルに行く前でよかった。私が使っていた最後のバージョンは RC5 でした。

Typescript 2.0.2 を使用しています。

私の app.module は次のようになります。

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 {

}

私の app.component は次のようになります。ルートを使用しているので、かなりむき出しです。router-outletとnavbarを含むページをロードするだけです。

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) {
  }
}

最後に、実際のログインが行われるホームページは次のようになります。

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();
    }


}

RC5 と Final の間で何が変更されて失敗したのかはわかりません。それが役立つ場合、これが私のpackage.jsonファイルです：

{
  "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"
  }
}

他の誰かがこれに出くわしましたか?

4

1 に答える 1

3

わかりました、修正しました。2つのステップがあります。

  1. へのアップグレードangularfire2@2.0.0-beta.5-preview
  2. npm install @types/request@0.0.30
  3. 利益。

これで問題は解決し、すべてが機能するようになりました。:)

于 2016-09-16T14:04:37.820 に答える