Enabling The Second-Click Of A RouterLink Fragment Using onSameUrlNavigation Reload In Angular 7.1.3

// Import the core angular services.
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";

// Import the application components and services.
import { AppComponent } from "./app.component";

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

@NgModule({
	imports: [
		BrowserModule,
		RouterModule.forRoot(
			[],
			{
				// Tell the router to use the hash instead of HTML5 pushstate.
				useHash: true,

				// In order to get anchor / fragment scrolling to work at all, we need to
				// enable it on the router.
				anchorScrolling: "enabled",

				// Once the above is enabled, the fragment link will only work on the
				// first click. This is because, by default, the Router ignores requests
				// to navigate to the SAME URL that is currently rendered. Unfortunately,
				// the fragment scrolling is powered by Navigation Events. As such, we
				// have to tell the Router to re-trigger the Navigation Events even if we
				// are navigating to the same URL.
				onSameUrlNavigation: "reload",

				// Let's enable tracing so that we can see the aforementioned Navigation
				// Events when the fragment is clicked.
				enableTracing: true,
				scrollPositionRestoration: "enabled"
			}
		)
	],
	declarations: [
		AppComponent
	],
	providers: [
		// CAUTION: We don't need to specify the LocationStrategy because we are setting
		// the "useHash" property in the Router module above (which will be setting the
		// strategy for us).
		// --
		// {
		// provide: LocationStrategy,
		// useClass: HashLocationStrategy
		// }
	],
	bootstrap: [
		AppComponent
	]
})
export class AppModule {
	// ...
}

// Import the core angular services.
import _ = require( "lodash" );
import { Component } from "@angular/core";

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

@Component({
	selector: "my-app",
	styleUrls: [ "./app.component.less" ],
	template:
	`
		<p id="top-of-page" class="nav">
			<a routerLink="." fragment="section-a">Section A</a>
			<a routerLink="." fragment="section-b">Section B</a>
		</p>

		<section id="section-a">

			<h2>
				Section A
			</h2>

			<p *ngFor="let i of range">
				Filler content goes here...
			</p>

		</section>

		<p>
			<a routerLink="." fragment="top-of-page">Back to Top</a>
		</p>

		<section id="section-b">

			<h2>
				Section B
			</h2>

			<p *ngFor="let i of range">
				Filler content goes here...
			</p>

		</section>

		<p>
			<a routerLink="." fragment="top-of-page">Back to Top</a>
		</p>
	`
})
export class AppComponent {

	public range: number[] = _.range( 1, 30 );

}