How to pass messages to Angular app's loading screen?

When an angular2 app is loading, the content in index.html appears until it is replaced by the code of app's components, and we usually exchange it for an image, an animation or a static message like 'wait, loading...'

But is there a way to reserve an space with a binded variable to show a message for each piece of the app that is being loaded and that has a message to be shared, like those splash screens of applications like Eclipse?

Solution

Yes you can. You can use plain html, css and JavaScript before loading the angular core.

For an example, if you want to show a your route in the loading screen dynamically, you can put the following on your body of index.html

<p id="demo"></p>

<script>
  document.getElementById("demo").innerHTML =
    "The full URL of this page is:<br>" + window.location.href;
</script>

Here, the thing is, you cannot load anything from angular side. No information can be loaded from angular core.

What you can do is, you need to know which component would be loaded based on the current route (URL). So using that current route, you can show dynamic content. All is upto CSS, JS and HTML.

But there is no other way to access Angular Core.