Including HTML in Angular application at compile time

Question

I know the question looks like some others I could read but it's not the exact same issue in my opinion.

I have a "loading screen" (small piece of HTML) in my Angular application. This loading screen is present in three places :

• When the application is not loaded yet (so inside the tag of the root component in the index.html : <app-root>my loading html</app-root>
• When the router inside the root component is not yet ready to display the "final" component. (See answer here for more detail)
• In the "final" component itself waiting for some data to be loaded from an HTTP service.

In the second and the third cases the "loading screen" could be in another component. But it's not possible for the first one since another component will only be displayed after the app is fully loaded and we want the first loading screen to be visible as soon the user get the index.html.

So for the moment I have this short "loading screen" HTML duplicated in multiple places.

I don't care if it's duplicated once built and delivered to the user but from a code point of view I want it to exist only once... (You know how it is, when someone will have to change the message it will be forgotten in the other places...)

I could use iframe (or object but W3C advise to use iframe instead) but people here want to avoid it at all cost so I think the code duplication will be preferred to this solution.

I could also have a small JS to do it (like this answer) but it feel wrong to add a "wild js" in an Angular app...

My question is : Do I have a way to include HTML file into another HTML file (like the "include()" in PHP) with some markup (like in this answer about Service Side Include) that could be resolved during the Angular compilation? I mean the AOT compilation is already checking the HTML template so it could be quite easy...

Thanks in advance!

Answer 1

It's not in the compilation time, but a way to do something similar to what you are asking, is this:

You could have your "loading screen" html code as a component (for instance, app-loading-component), declared and exported inside a Shared Module.

Then, in the component 'X' in which you want to use it, you have to import the Shared Module in the section imports:[] of the module of that 'X' component, and used it in your HTML in the usual way:

<app-loading-component></app-loading-component>