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

我正在重定向到路线＆＃39; / protected＆＃39;一旦通过Google验证，但该页面显示了新的路线组件和前一个组件：

问题必须是Angularfire和Material Animations之间的兼容性问题：评论BrowserAnimationsModule的导入可以解决问题。

为了帮助理解和复制，你有：
   - StackBlitz project令人讨厌的部分是这个例子有效，但仍然呈现一个过渡状态，其中显示了两个组件。
   - github repository，其中最少的代码重现错误    - 前一个回购邮件中的app running。

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

提前致谢。

Answer 1

尤里卡！尤里卡！

出于某种原因，你所做的工作是在角度范围之外。因此.then中的login.component不会触发lifecycle.tick，这会更新完整的用户界面。在您的应用中，您可以看到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);
      });
    }
}

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