Angular + firebase auth + Material =路由器崩溃

Question

Firebase 身份验证后路由器无法正常工作。问题来自@angular/animations，导入 NoopAnimationsModule 或 BrowserAnimationsModule 时路由器无法正常工作

package.json


“依赖项”:{
"@Angular/animations": "^5.2.8",
"@Angular/cdk": "^5.2.4",
"@Angular/common": "^5.2.0",
“@ Angular/编译器”:“^5.2.0”，
“@ Angular/核心”:“^5.2.0”，
“@ Angular/形式”:“^5.2.0”，
"@Angular/http": "^5.2.0",
“@ Angular/ Material ”:“^5.2.4”，
"@angular/platform-b​​rowser": "^5.2.0",
"@angular/platform-b​​rowser-dynamic": "^5.2.0",
“@ Angular/路由器”:“^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烦人的部分是这个示例可以工作，但仍然呈现一个显示两个组件的过渡状态。
- A github repository用最少的代码重现错误。
- app running来自上一个存储库。

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

提前致谢。

Answer 1

Eureka ! Eureka !

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

这与我们在 angularJs 中使用 $scope.$apply 手动触发摘要周期的原因类似。

手动执行outsideAngularWork的 Angular 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);
      });
    }
}

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