Jane Wayne Jane Wayne - 10 days ago 6
jQuery Question

Some questions on what to do while an Angular 2 application is loading

I am using the

angular-cli
to create an Angular 2 application. After the application is created with
ng new NEW_PROJECTNAME
, we get a
index.html
page. In this page they have something like this.

...
<body>
<app-root>Loading...</app-root>
...
</body>


Needless to say, this loading message may appear wholly unprofessional. So my question is how do I add something more appropriate like a progress bar or spinner?

I realize that what needs to happen is happening all outside of the Angular framework (right?). I found some Angular 2 packages that would be very good to use (e.g. Angular 2 material or the ng2-slim-loading-bar), but these packages assume I have already entered the Angular framework; meaning I'm inside some Angular component.

So my questions are as follows.


  • Is there an Angular 2 hook that I can use to show a loading indicator before content is placed in
    <app-root></app-root>
    ?

  • If I have to work outside of the Angular framework, what would be the best approach? Naively, I'd envision I'd have to install some package with
    bower
    or
    npm
    , reference that in
    index.html
    , and use
    jQuery
    or something to show the loading indicator. I assume by the time Angular is done loading, it'll replace whatever is inside
    <app-root></app-root>
    . One of my concerns with this approach is the building/packaging scripts (I'd then have to figure out how to include this bower/npm package with my built application).



Any help is appreciated.

Answer

The easiest way is to put a CSS animation inside the app bootstrap component when the app is ready the content will be replaced.

Note that the app will load at different speeds depending on whether it is a development build or a production build, because of the minification of the scripts and the change detection will run only once, giving faster loading times. You might need to adjust the speed of the animation. Http requests from the app may also play a role.

I got this from: http://www.alessioatzeni.com/blog/css3-loading-animation/

CSS and Html in the root component:

  <app-root>

  <style>
    #content {
      width: 100%;
      /* Full Width */
      height: 1px;
      margin: 1px auto;
      background: #000;
    }

    .expand {
      width: 100%;
      height: 1px;
      margin: 1px 0;
      background: #2187e7;
      position: absolute;
      box-shadow: 0px 0px 10px 1px rgba(0, 198, 255, 0.7);

                 /*adjust speed here */
      -moz-animation: fullexpand 1.5s ease-out;
      -webkit-animation: fullexpand 1.5s ease-out;
    }


    /* Full Width Animation Bar */

    @-moz-keyframes fullexpand {
      0% {
        width: 0px;
      }
      100% {
        width: 100%;
      }
    }

    @-webkit-keyframes fullexpand {
      0% {
        width: 0px;
      }
      100% {
        width: 100%;
      }
      ;
    }
  </style>

    <div id="content">
      <span class="expand">Loading...</span>
    </div>


  </app-root>

The second option is to access the bootstrap functionality trough system.js and make it available for script tags in index.html.

Here is a blog post by Ben Nadel no How to do that.

Demo: Creating A Pre-Bootstrap Loading Screen In Angular 2 RC 1

(function( global ) {

    // .... code removed ....

    System.config({
        // .... code removed ....
    });

    // Load "./app/main.ts" (gets full path from package configuration above).
    // --
    // NOTE: We are attaching the resultant promise to the global scope so that other
    // scripts may listen for the successful loading of the application.
    global.bootstrapping = System
        .import( "app" )
        .then(
            function handleResolve() {

                console.info( "System.js successfully bootstrapped app." );

            },
            function handleReject( error ) {

                console.warn( "System.js could not bootstrap the app." );
                console.error( error );

                return( Promise.reject( error ) );

            }
        )
    ;

})( window );
Comments