각도 4 및 각도 파이어 2 라우터가 탐색하지만 이전 구성 요소가 계속 표시됩니다.

Question

각도 4 및 각도 파이어 2 (파이어베이스)를 사용하는 프로젝트에서 사용자가 성공적으로 로그인 한 후 홈 페이지로 이동하려고합니다. 제 3 자 (Google 또는 Facebook).

사용자가 angularfire2 팝업을 사용하여 인증 된 후에 문제가 발생합니다. 라우터가 올바르게 탐색합니다 (브라우저가 변경되고 홈 구성 요소가 표시됨). 로그인 구성 요소가 계속 표시됩니다 !!

문제가 angularfire2 로그인과 관련이있는 경우 확실하지 않습니다. popoups 또는 Angle 4 자체, 제안 사항이 있습니까?

angularfire2 콜백 :

signInWithGoogle() { 
    this.angularFireAuth.auth.signInWithPopup(new 
    firebase.auth.GoogleAuthProvider()).then((infos) => { 
    this.router.navigate['/home']; 
    }); 
} 

라우터 설정 :

const memberSpaceRoutes: Routes = [ 
     { path: 'sign-in', component: SignInComponent }, 
     { path: 'home', component: Home}, 
] 

Answer 1

이 pathMatch보십시오 : 귀하의 경로 설정

const memberSpaceRoutes: Routes = [ 
     { path: 'sign-in', component: SignInComponent, pathMatch: 'full' }, 
     { path: '/home', component: Home, pathMatch: 'full'}, 
] 

Answer 2

내가 설명에 대해 확실하지 오전에 '전체'를, 그러나 당신은 각도에 대해 알 수있는 상황 (특히 영역) 외부에 있습니다

가져 오기 NgZone과는 내부에 사용 후

this.zone.run(() => {this.router.navigate['/home']}) 

Answer 3

음, 원래의 질문을 고려, 당신이 당신의 문제의 근본을 분석 할 수있는 충분한 정보를 제공하지 수 있음을 보인다.

그러나 코드에서 런타임 오류가 발생했을 수 있으며 코드에서 BrowserAnimationsModule을 사용하는 경우 각도를 사용하여 이전 구성 요소를 새 구성 요소로 바꾸지 않고 대신 새 구성 요소를 맨 위에 추가 할 수 있습니다 오래된 것들. 이것은 Angular 4의 BrowserAnimationsModule과 관련하여 알려진 문제입니다. 코드에서 런타임 오류를 제거하거나 BrowserAnimationsModule을 제거 할 수 있습니다.

당신은 GitHub의에서 문제 설명을 확인하실 수 있습니다 : https://github.com/angular/angular/issues/19093

Answer 4

는 또한 나에게 일어났다. 해결 방법은 signInWithGoogle 함수 외부에서 router.navigate 메소드를 트리거하는 것입니다. 더 자세한 정보 : 이유는 signInWithGoogle이 약속을 반환하고 약속이 완전히 해결되기 전에이 함수 내에서 router.navigate 메소드를 트리거하면 현재 구성 요소에 새 구성 요소 (경로)가 삽입되어 두 경로 렌더링. signInWithGoogle 함수 외부에서 router.navigate 메소드를 트리거하고 약속이 해결 된 후에 만 ​​작동해야합니다. 적어도 그것은 나를 위해 일했습니다.