角度+ Firebase身份验证+材质=路由器崩溃 [英] angular + firebase auth + material = router crashes
问题描述
经过Firebase身份验证后，路由器无法正常工作.问题是从@ angular/animations传来的，都无法导入NoopAnimationsModule或BrowserAnimationsModule路由器无法正常工作
The router is not working properly after firebase authentication. The problem is comming from @angular/animations, both importing NoopAnimationsModule or BrowserAnimationsModule the router doesn't work properly
"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"
}
"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"路由，但是该页面显示了新的路由组件和上一个组件:
I'm redirecting to route '/protected' once authenticated with Google, but the page shows the new route component and the previous one:
该问题一定是Angularfire与Material Animations之间的兼容性问题:评论BrowserAnimationsModule的导入可解决此问题.
The problem must be a compatibilty issue between Angularfire and Material Animations: commenting the import of BrowserAnimationsModule fixes the issue.
为帮助理解和复制，您具有:
- StackBlitz项目令人讨厌的部分是该示例有效，但仍呈现出过渡状态显示了组件.
-一个 github存储库，其中包含最少的代码来再现该错误.
-上一个存储库中的应用正在运行.
To help understand and reproduce, you have:
- StackBlitz project The annoying part is that this example works, but still presents a transitional state where both components are shown.
- A github repository with the minimum of code reproducing the error.
- The app running from the previous repo.
一旦找到修复程序，firebase凭证将停止工作，因此请使用您自己的.
The firebase credentials will stop working once I find the fix, so please use your own.
谢谢.
推荐答案
尤里卡！尤里卡！
出于某种原因，您正在做的工作不在角度范围内.因此，login.component中的.then不会触发lifecycle.tick，这将更新完整的UI.在您的应用程序中，您可以看到login component template在多个void事件(键盘或鼠标输入)之后会消失，因为它会触发tick，但是您无法指定事件在多长时间后会消失.
Do to some reason the work you are doing is outside angular scope. So .then in login.component doesn't trigger lifecycle.tick, which will update complete UI. In your app you can see the login component template will disappear after multiple void events (keyboard or mouse input) because it will trigger tick but you cant specify after how may events it will disappear.
这与我们在angularJs中使用$scope.$apply手动触发digest cycle的原因类似.
This is similar reason for which we used $scope.$apply in angularJs for manually triggering digest cycle.
手动执行outsideAngularWork的4号角方法将需要在login.component中进行如下修改
The angular 4 way of manually doing outsideAngularWork will need modification in login.component as follow
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);
});
}
}
希望这也可以解决您计算机上的问题.
Hope this will solve issue on your machine too.
这篇关于角度+ Firebase身份验证+材质=路由器崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
