fix(router): update route snapshot before emit new values (#13558)

Closes #12912

modules/@angular/router/src/router_state.ts

@@ -328,22 +328,23 @@ function serializeNode(node: TreeNode<ActivatedRouteSnapshot>): string {
  */
 export function advanceActivatedRoute(route: ActivatedRoute): void {
   if (route.snapshot) {
-    if (!shallowEqual(route.snapshot.queryParams, route._futureSnapshot.queryParams)) {
+    const currentSnapshot = route.snapshot;
+    route.snapshot = route._futureSnapshot;
+    if (!shallowEqual(currentSnapshot.queryParams, route._futureSnapshot.queryParams)) {
       (<any>route.queryParams).next(route._futureSnapshot.queryParams);
     }
-    if (route.snapshot.fragment !== route._futureSnapshot.fragment) {
+    if (currentSnapshot.fragment !== route._futureSnapshot.fragment) {
       (<any>route.fragment).next(route._futureSnapshot.fragment);
     }
-    if (!shallowEqual(route.snapshot.params, route._futureSnapshot.params)) {
+    if (!shallowEqual(currentSnapshot.params, route._futureSnapshot.params)) {
       (<any>route.params).next(route._futureSnapshot.params);
     }
-    if (!shallowEqualArrays(route.snapshot.url, route._futureSnapshot.url)) {
+    if (!shallowEqualArrays(currentSnapshot.url, route._futureSnapshot.url)) {
       (<any>route.url).next(route._futureSnapshot.url);
     }
-    if (!equalParamsAndUrlSegments(route.snapshot, route._futureSnapshot)) {
+    if (!equalParamsAndUrlSegments(currentSnapshot, route._futureSnapshot)) {
       (<any>route.data).next(route._futureSnapshot.data);
     }
-    route.snapshot = route._futureSnapshot;
   } else {
     route.snapshot = route._futureSnapshot;
 
@@ -356,4 +357,4 @@ export function advanceActivatedRoute(route: ActivatedRoute): void {
 export function equalParamsAndUrlSegments(
     a: ActivatedRouteSnapshot, b: ActivatedRouteSnapshot): boolean {
   return shallowEqual(a.params, b.params) && equalSegments(a.url, b.url);
-}
+}

modules/@angular/router/test/integration.spec.ts

@@ -551,13 +551,17 @@ describe('Integration', () => {
        const user = fixture.debugElement.children[1].children[1].componentInstance;
 
        expect(team.recordedParams).toEqual([{id: '22'}]);
+       expect(team.snapshotParams).toEqual([{id: '22'}]);
        expect(user.recordedParams).toEqual([{name: 'victor'}]);
+       expect(user.snapshotParams).toEqual([{name: 'victor'}]);
 
        router.navigateByUrl('/team/22/user/fedor');
        advance(fixture);
 
        expect(team.recordedParams).toEqual([{id: '22'}]);
+       expect(team.snapshotParams).toEqual([{id: '22'}]);
        expect(user.recordedParams).toEqual([{name: 'victor'}, {name: 'fedor'}]);
+       expect(user.snapshotParams).toEqual([{name: 'victor'}, {name: 'fedor'}]);
      })));
 
   it('should work when navigating to /', fakeAsync(inject([Router], (router: Router) => {
@@ -2777,11 +2781,15 @@ class BlankCmp {
 class TeamCmp {
   id: Observable<string>;
   recordedParams: Params[] = [];
+  snapshotParams: Params[] = [];
   routerLink = ['.'];
 
   constructor(public route: ActivatedRoute) {
     this.id = map.call(route.params, (p: any) => p['id']);
-    route.params.forEach(_ => this.recordedParams.push(_));
+    route.params.forEach(p => {
+      this.recordedParams.push(p);
+      this.snapshotParams.push(route.snapshot.params);
+    });
   }
 }
 
@@ -2797,10 +2805,14 @@ class TwoOutletsCmp {
 class UserCmp {
   name: Observable<string>;
   recordedParams: Params[] = [];
+  snapshotParams: Params[] = [];
 
   constructor(route: ActivatedRoute) {
     this.name = map.call(route.params, (p: any) => p['name']);
-    route.params.forEach(_ => this.recordedParams.push(_));
+    route.params.forEach(p => {
+      this.recordedParams.push(p);
+      this.snapshotParams.push(route.snapshot.params);
+    });
   }
 }
 
@@ -2923,7 +2935,7 @@ function createRoot(router: Router, type: any): ComponentFixture<any> {
     RootCmp,
     RelativeLinkInIfCmp,
     RootCmpWithTwoOutlets,
-    EmptyQueryParamsCmp
+    EmptyQueryParamsCmp,
   ],
 
 
@@ -2949,7 +2961,7 @@ function createRoot(router: Router, type: any): ComponentFixture<any> {
     RootCmp,
     RelativeLinkInIfCmp,
     RootCmpWithTwoOutlets,
-    EmptyQueryParamsCmp
+    EmptyQueryParamsCmp,
   ],
 
 
@@ -2976,7 +2988,7 @@ function createRoot(router: Router, type: any): ComponentFixture<any> {
     RootCmp,
     RelativeLinkInIfCmp,
     RootCmpWithTwoOutlets,
-    EmptyQueryParamsCmp
+    EmptyQueryParamsCmp,
   ]
 })
 class TestModule {