0

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!

Arcord
  • 1,724
  • 1
  • 11
  • 16
  • It seems to be build time not compile time (I want the user to see it as soon as the HTML is loaded even if the script file or the angular app is not loaded) and it was for AngularJS :/ https://stackoverflow.com/questions/43440422/what-is-the-alternative-for-ng-include-in-angular2/52134335 The alternative in angular 2+ is to use a child component which does not solve my issue – Arcord Jan 11 '22 at 19:46
  • runtime not compile time* sorry – Arcord Jan 11 '22 at 20:04
  • yes excuse me angularJS !! this other way can serve you Create Reusable Components with ng- template and--> https://angular.io/api/common/NgTemplateOutlet – nestdan Jan 11 '22 at 20:07
  • there are various usage ways at https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/ – nestdan Jan 11 '22 at 21:01
  • But once again it's runtime so it will only be displayed when the application is entirely loaded. I display this "loading" screen as a default template of the app-root component in the index.html like my loading message. The benefits of it is it's displayed as soon as the index.html is loaded (even if the script files are not loaded yet). – Arcord Jan 12 '22 at 11:05

1 Answers1

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>
Juan Vicente Berzosa Tejero
  • 2,786
  • 2
  • 5
  • 15
  • This solution will not work for the first case where the "loading screen" is used as default template : My loading screen. This ensure the loading screen is shown as soon as the index.html is loaded (even if the script files or the application startup is slower) and then it's definitely replaced by the actual content of "app-root". That's why I think I need a compile time solution... – Arcord Jan 11 '22 at 19:49