From a7d5c55926a91f85a9a089b3533bba1205a16cc4 Mon Sep 17 00:00:00 2001
From: Sonu Kapoor <sonukapoor@gmail.com>
Date: Wed, 5 Feb 2020 22:56:43 -0500
Subject: [PATCH] docs: fix routing code to use `navigate` (#35176)

Previously, the example in the `router` guide was not
preserving the query params after logging in.

This commit fixes this by using `navigate` instead of
using `navigateByUrl`, which ignores any properties in
the `NavigationExtras` that would change the provided URL.

Fixes 34917

PR Close #35176
---
 .../src/app/auth/login/login.component.1.ts       | 12 ++++++------
 .../router/src/app/auth/login/login.component.ts  | 15 +++++++--------
 aio/content/guide/router.md                       |  8 +++++++-
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/aio/content/examples/router/src/app/auth/login/login.component.1.ts b/aio/content/examples/router/src/app/auth/login/login.component.1.ts
index 0879347c70..fbc45c5d36 100644
--- a/aio/content/examples/router/src/app/auth/login/login.component.1.ts
+++ b/aio/content/examples/router/src/app/auth/login/login.component.1.ts
@@ -1,6 +1,6 @@
 // #docregion
-import { Component }   from '@angular/core';
-import { Router }      from '@angular/router';
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
 import { AuthService } from '../auth.service';
 
 @Component({
@@ -25,12 +25,12 @@ export class LoginComponent {
     this.authService.login().subscribe(() => {
       this.setMessage();
       if (this.authService.isLoggedIn) {
-        // Get the redirect URL from our auth service
-        // If no redirect has been set, use the default
-        let redirect = this.authService.redirectUrl ? this.router.parseUrl(this.authService.redirectUrl) : '/admin';
+        // Usually you would use the redirect URL from the auth service.
+        // However to keep the example simple, we will always redirect to `/admin`.
+        const redirectUrl = '/admin';
 
         // Redirect the user
-        this.router.navigateByUrl(redirect);
+        this.router.navigate([redirectUrl]);
       }
     });
   }
diff --git a/aio/content/examples/router/src/app/auth/login/login.component.ts b/aio/content/examples/router/src/app/auth/login/login.component.ts
index ca3eb70a34..652afc66f3 100644
--- a/aio/content/examples/router/src/app/auth/login/login.component.ts
+++ b/aio/content/examples/router/src/app/auth/login/login.component.ts
@@ -1,8 +1,7 @@
 // #docregion
-import { Component }        from '@angular/core';
-import { Router,
-         NavigationExtras } from '@angular/router';
-import { AuthService }      from '../auth.service';
+import { Component } from '@angular/core';
+import { NavigationExtras, Router } from '@angular/router';
+import { AuthService } from '../auth.service';
 
 @Component({
   selector: 'app-login',
@@ -26,9 +25,9 @@ export class LoginComponent {
     this.authService.login().subscribe(() => {
       this.setMessage();
       if (this.authService.isLoggedIn) {
-        // Get the redirect URL from our auth service
-        // If no redirect has been set, use the default
-        let redirect = this.authService.redirectUrl ? this.router.parseUrl(this.authService.redirectUrl) : '/admin';
+        // Usually you would use the redirect URL from the auth service.
+        // However to keep the example simple, we will always redirect to `/admin`.
+        const redirectUrl = '/admin';
 
         // #docregion preserve
         // Set our navigation extras object
@@ -39,7 +38,7 @@ export class LoginComponent {
         };
 
         // Redirect the user
-        this.router.navigateByUrl(redirect, navigationExtras);
+        this.router.navigate([redirectUrl], navigationExtras);
         // #enddocregion preserve
       }
     });
diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md
index c1765d6347..15711db702 100644
--- a/aio/content/guide/router.md
+++ b/aio/content/guide/router.md
@@ -3302,7 +3302,13 @@ Although it doesn't actually log in, it has what you need for this discussion.
 It has an `isLoggedIn` flag to tell you whether the user is authenticated.
 Its `login` method simulates an API call to an external service by returning an
 observable that resolves successfully after a short pause.
-The `redirectUrl` property will store the attempted URL so you can navigate to it after authenticating.
+The `redirectUrl` property stores the URL that the user wanted to access so you can navigate to it after authentication.
+
+<div class="alert is-helpful">
+
+To keep things simple, this example redirects unauthenticated users to `/admin`. 
+
+</div>
 
 Revise the `AuthGuard` to call it.