Is it possible to load some component before "App" component? Angular2

Question

My application starts from App component:

@NgModule({
  bootstrap: [ App ]
...

This is my index.hmtl

...
<app>
 Loading...
</app>
...

But I want to make splash screen instead of just "Loading ... " message:

...
<app>
  <splash></splash>
</app>
...

Also I added splash screen to main module declarations:

...
declarations: [
  App,
  SplashScreen
],
...

But ... bootstrapping process starts from App component and Splash is not loaded. How can I load Splash component before App component and use it?

Answer 1

You can't load a component without Angular, so you probably need to make a "static" splash screen/loading animation with pure HTML (and JS, if you need that).

Answer 2

You can make the AppComponent as lightweight as possible and add an <my-actual-app-component *ngIf="dataIsLoaded">my-actual-app-component> if you think rendering your AppComponent is taking some time. Usually it's just the initialization of Angular2 itself.

Answer 3

The app component would be the one you load from Angular 2. If you want a splash screen, you will need to do that in your index.html. From there you can add js and css to it if you want some sort of animation other than a static splash screen (i.e. a loading circle).