Creating A Pre-Bootstrap Loading Screen With window.postMessage() In Angular 6.1.2

// I create and return a custom event with the given configuration.
private createEvent(
	eventType: string,
	bubbles: boolean,
	cancelable: boolean
	) : Event {

	// IE (shakes fist) uses some other kind of event initialization. As such,
	// we'll default to trying the "normal" event generation and then fallback to
	// using the IE version.
	try {

		var customEvent: any = new CustomEvent(
			eventType,
			{
				bubbles: bubbles,
				cancelable: cancelable
			}
		);

	} catch ( error ) {

		var customEvent: any = this.doc.createEvent( "CustomEvent" );

		customEvent.initCustomEvent( eventType, bubbles, cancelable );

	}

	return( customEvent );

}

// Import the core angular services.
import { Injectable } from "@angular/core";

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

@Injectable({
	providedIn: "root"
})
export class MessageService {

	// I initialize the message service.
	constructor() {
		// ....
	}

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

	// I send messages outside of the current Angular application to the parent window.
	public send( message: any ) : void {

		window.postMessage( message, this.getOriginForSelf() );

	}

	// ---
	// PRIVATE METHODS.
	// ---

	// I calculate the postMessage() origin that will lock the message target down to
	// the current window (for tightest security).
	// --
	// NOTE: Technically, this isn't really necessary since we know that we're only
	// sending messages to the SELF window. But, it's a good practice to always provide
	// an explicit origin value.
	private getOriginForSelf() : string {

		// At this time, if the application is being loaded directly off disk (ie, not
		// being served-up as a web-app), then the origin has to be "*" or the message
		// will be denied by the browser. If you never expect to serve from disk, you can
		// omit this edge-case.
		if ( window.location.protocol === "file:" ) {

			return( "*" );

		// If the application is being served-up "proper", then let's lock it down to the
		// current origin.
		} else {

			return( `${ window.location.protocol }//${ window.location.host }` );

		}

	}

}

// Import the core angular services.
import { Injectable } from "@angular/core";

// Import the application components and services.
import { MessageService } from "./message.service";

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

@Injectable({
	providedIn: "root"
})
export class AppReadyEvent {

	private hasBeenTriggered: boolean;
	private messageService: MessageService;

	// I initialize the app ready event service.
	constructor( messageService: MessageService ) {

		this.messageService = messageService;
		this.hasBeenTriggered = false;

	}

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

	// I emit the "appready" event outside of the Angular application.
	public trigger() : void {

		if ( this.hasBeenTriggered ) {

			return;

		}

		this.hasBeenTriggered = true;
		this.messageService.send( "appready" );

	}

}

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

// Import the application components and services.
import { AppReadyEvent } from "./app-ready-event";

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

@Component({
	selector: "my-app",
	styleUrls: [ "./app.component.less" ],
	template:
	`
		The app has loaded! Woot :D
	`
})
export class AppComponent {

	private appReadyEvent: AppReadyEvent;

	// I initialize the app-component.
	constructor( appReadyEvent: AppReadyEvent ) {

		this.appReadyEvent = appReadyEvent;

	}

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

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

		// FOR THE SAKE OF THE DEMO, let's add a small delay here so that the app can be
		// in a "loading" state for a "visible" amount of time.
		setTimeout(
			() => {

				this.appReadyEvent.trigger();

			},
			1000
		);

	}

}

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />

	<title>
		Creating A Pre-Bootstrap Loading Screen With window.postMessage() In Angular 6.1.2
	</title>
</head>
<body>

	<style type="text/css" class="preloader">
		div.splash {
			background-color: #ffffff ;
			bottom: 0px ;
			display: flex ;
			left: 0px ;
			position: fixed ;
			right: 0px ;
			top: 0px ;
		}

		div.splash--loaded {
			opacity: 0.0 ;
			transition: opacity 500ms ease ;
		}

		div.splash__message {
			font-size: 26px ;
			line-height: 31px ;
			margin: auto auto auto auto ;
			text-decoration: underline ;
		}
	</style>

	<div class="preloader splash">
		<div class="splash__message">
			App is Loading
		</div>
	</div>

	<script type="text/javascript" class="preloader">
		(function listenForAppReadyEvent() {

			// Gather DOM references.
			var splash = document.querySelector( ".splash" );
			var preloaders = document.querySelectorAll( ".preloader" );

			// Listen for our "appready" message event.
			window.addEventListener( "message", handleMessage, false );

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

			// I handle "message" events on the current window.
			function handleMessage( event ) {

				if ( event.data === "appready" ) {

					console.log( "AppReady event received!" );
					window.removeEventListener( "message", handleMessage, false );
					removeSplashScreen();

				}

				// NOTE ON SECURITY: According to the documentation on postMessage(), you
				// should always test the Origin and [optionally] the Source attributes
				// of the "message" event in order to make sure the event is coming from
				// the expected place. However, for something as innocuous as the
				// "splash page", I'm omitting such a security check. Since this handler
				// does nothing but remove DOM elements from the static portion of the
				// page, there's no security risk here that I can see. Such a test would
				// add unnecessary complexity. That said, testing the origin is a best
				// practice that should be done with anything that involves passing
				// around sensitive data.

			}

			// I remove the splash screen and elements from the DOM, exposing the loaded
			// application beneath them.
			function removeSplashScreen() {

				splash.classList.add( "splash--loaded" );

				// Once the splash screen has been faded-out, let's rip all of the
				// preloader-related DOM elements out of the document.
				setTimeout(
					function removeDomElements() {

						for ( var i = 0 ; i < preloaders.length ; i++ ) {

							var item = preloaders[ i ];
							item.parentNode.removeChild( item );

						}

					},
					500
				);

			}

		})();
	</script>


	<h1>
		Creating A Pre-Bootstrap Loading Screen With window.postMessage() In Angular 6.1.2
	</h1>

	<my-app></my-app>

</body>
</html>