Menu
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.
<app-root></app-root>?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.
874
Lazy loading means to load the content on demand. To load only the necessary HTML, CSS, JavaScript files when needed. This helps to avoid redundant loading of files which increases the performance and will have great user experience. Question no: 25:- How to implement Lazy Loading in Angular ?
ts” file, i.e., “main. ts” file is the main file from where the execution of an Angular application will start.
Angular 2 supports JavaScript, Dart, and TypeScript. You'll use TypeScript as the development language for this tutorial's project. The framework is built on TypeScript, and most of the documentation, books, and tutorials on Angular focus on TypeScript as the development language.
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 );
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
