Using "replaceUrl" In Order To Honor The Back-Button While Chaining Absolute Redirects In Angular 7.2.13

RouterModule.forRoot(
	[
		{
			path: "people",
			children: [
				// NOTE: Local redirect from (/people) to (/people/list).
				{
					path: "",
					pathMatch: "full",
					redirectTo: "list"
				},
				{
					path: "list",
					component: PeopleListComponent
				}
			]
		},

		// SCENARIO: We have an old route for "/users" that we now want to
		// redirect to the "/people" route so that old links continue to work.
		// Only, this WILL BREAK because the "/people" route has a local redirect
		// to the "list" end-point. This WILL NOT BE HONORED as local redirects
		// are never followed after an absolute redirect.
		{
			path: "users",
			redirectTo: "/people" // <---- WILL NOT WORK (like we want it to).
		},

		// To get AROUND the ABSOLUTE REDIRECT limitation, we can use a transient
		// component. While the in-built "redirectTo" command won't allow for
		// subsequent local redirects, the Router.navigateByUrl() method will.
		// Meaning, an absolute URL navigation can be followed by local redirects
		// in the Router configuration. To demonstrate, we'll chain a few
		// absolute redirects that will eventually consume the local "people"
		// redirect (to people/list).
		{
			path: "ping",
			component: AbsoluteRedirectComponent,
			data: {
				redirectTo: "/pong" // <--- absolute redirect to FOLLOWING route.
			}
		},
		{
			path: "pong",
			component: AbsoluteRedirectComponent,
			data: {
				redirectTo: "/people" // <--- absolute redirect to PEOPLE route.
			}
		}
	],
	{
		// Tell the router to use the hash instead of HTML5 pushstate.
		useHash: true,

		// Enable the Angular 6+ router features for scrolling and anchors.
		scrollPositionRestoration: "enabled",
		anchorScrolling: "enabled",
		enableTracing: false
	}
)

public ngOnInit() : void {

	console.warn( "Absolute redirect to:", this.redirectTo );
	// NOTE: We could have performed the .navigateByUrl() in the constructor.
	// However, doing so would have emitted a "navigation canceled" event. By waiting
	// until the init method, we allow the previous navigation to complete before we
	// start the new navigation. This feel more in alignment with the way the built-
	// in "redirectTo" property works.
	this.router.navigateByUrl( this.redirectTo );

}

public ngOnInit() : void {

	console.warn( "Absolute redirect to:", this.redirectTo );
	// NOTE: We could have performed the .navigateByUrl() in the constructor.
	// However, doing so would have emitted a "navigation canceled" event. By waiting
	// until the init method, we allow the previous navigation to complete before we
	// start the new navigation. This feel more in alignment with the way the built-
	// in "redirectTo" property works.
	this.router.navigateByUrl(
		this.redirectTo,
		// By replacing the current URL in the history, we keep the Browser's Back
		// Button behavior in tact. This will allow the user to easily navigate back
		// to the previous URL without getting caught in a redirect.
		{
			replaceUrl: true
		}
	);

}

// Import the core angular services.
import { ActivatedRoute } from "@angular/router";
import { Component } from "@angular/core";
import { Router } from "@angular/router";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

@Component({
	selector: "my-absolute-redirect",
	template:
	`
		<em>Redirecting to <code>{{ redirectTo }}</code></em>
	`
})
export class AbsoluteRedirectComponent {

	public redirectTo: string;

	private router: Router;

	// I initialize the absolute-redirect component.
	constructor(
		activatedRoute: ActivatedRoute,
		router: Router
		) {

		this.router = router;
		this.redirectTo = activatedRoute.snapshot.data.redirectTo;

	}

	// ---
	// PUBLIC METHODS.
	// ---

	// I get called after the inputs have been found for the first time.
	public ngOnInit() : void {

		console.warn( "Absolute redirect to:", this.redirectTo );
		// NOTE: We could have performed the .navigateByUrl() in the constructor.
		// However, doing so would have emitted a "navigation canceled" event. By waiting
		// until the init method, we allow the previous navigation to complete before we
		// start the new navigation. This feel more in alignment with the way the built-
		// in "redirectTo" property works.
		this.router.navigateByUrl(
			this.redirectTo,
			// By replacing the current URL in the history, we keep the Browser's Back
			// Button behavior in tact. This will allow the user to easily navigate back
			// to the previous URL without getting caught in a redirect.
			{
				replaceUrl: true
			}
		);

	}

}