angular + firebase auth + material = 路由器崩溃

Question

firebase 身份验证后路由器无法正常工作。问题来自@angular/animations，无论是导入 NoopAnimationsModule 还是 BrowserAnimationsModule 路由器都无法正常工作

package.json

"dependencies": { "@angular/animations": "^5.2.8", "@angular/cdk": "^5.2.4", "@angular/common": "^5.2.0", "@angular/compiler": "^5.2.0", "@angular/core": "^5.2.0", "@angular/forms": "^5.2.0", "@angular/http": "^5.2.0", "@angular/material": "^5.2.4", "@angular/platform-browser": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0", "@angular/router": "^5.2.0", "angularfire2": "^5.0.0-rc.6", "core-js": "^2.4.1", "firebase": "^4.11.0", "rxjs": "^5.5.6", "zone.js": "^0.8.19" }

一旦通过 Google 身份验证，我将重定向到路由“/protected”，但页面显示新的路由组件和前一个组件：

问题一定是 Angularfire 和 Material Animations 之间的兼容性问题：评论 BrowserAnimationsModule 的导入解决了这个问题。

为了帮助理解和重现，您有：
- StackBlitz project 烦人的部分是这个例子有效，但仍然呈现出两个组件都显示的过渡状态。
- 一个github repository，用最少的代码重现错误。
- 上一个 repo 中的 app running。

一旦我找到修复程序，firebase 凭据将停止工作，因此请使用您自己的。

提前致谢。

Answer 1

尤里卡！尤里卡！

出于某种原因，您正在做的工作超出了角度范围。因此login.component 中的.then 不会触发lifecycle.tick，这将更新完整的UI。在您的应用程序中，您可以看到login component template 将在多个void 事件（键盘或鼠标输入）后消失，因为它会触发tick，但您无法指定它会在多少事件后消失。

这与我们在 angularJs 中使用 $scope.$apply 手动触发 digest cycle 的原因类似。

手动执行outsideAngularWork的角度4方式需要在login.component中修改如下

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { NgZone } from '@angular/core';

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

  constructor( private router: Router,private zone: NgZone, private afAuth:AngularFireAuth) { }

    login(){
      this.zone.runOutsideAngular(() => {
        this.afAuth
        .auth
        .signInWithPopup(new firebase.auth.GoogleAuthProvider())
        .then(()=>{
            this.zone.run(() => { this.router.navigate(['/protected']);
          });
        })
        .catch(console.error);
      });
    }
}

希望这也能解决您机器上的问题。