web-dev-qa-db-fra.com

Angular 2+ préchargeurs d'application avec indicateur de pourcentage

Est-ce que quelqu'un connaît la bonne solution pour mettre en œuvre Angular 2+ préchargeurs avec indicateur de pourcentage (similaire à l'écran de chargement de Gmail)?

Je sais que la méthode habituelle consiste à ajouter <div> à l'intérieur de notre <app-root> et à le styler, voire à ajouter des animations CSS. Il sera remplacé par le contenu de l'application une fois l'application chargée.

Mais ... Ce que je cherche en réalité, c’est d’afficher un écran de démarrage animé (SVG ou autre), où, une fois l’animation terminée, la barre de chargement apparaît et indique le statut de la progression.

 enter image description here

Au début, je pensais à un composant splash séparé qui ne serait que le composant chargé avec impatience. À partir de là, chargerait tous les autres modules, mais si je mappais ce composant sur '/', comment l'afficher sur un autre itinéraire comme point de départ. De plus, cela signifie que Angular le paquet principal doit déjà être chargé, ce n'est donc pas une bonne option.

Très probablement, cette question est trop large et ne convient pas à Stack Overflow mais je ne trouve nulle part une bonne solution pour cela. :(

Existe-t-il un moyen de charger du code JavaScript en clair sans Angular qui chargera Angular et affichera les progrès? Ou une autre (meilleure) idée?

Cela doit être réalisable car tout Gmail est Angular - et ils l’ont: D

javascriptangularangular2-routingpreloader
6
Milos Miskone Sretin

Vous pouvez essayer ngx-progressbar , c'est vraiment cool. L'API n'est pas anodine mais bien documentée, vous pouvez donc construire la barre de progression de toute complexité.

UPD Après discussion, je suggérerais l'approche suivante (index.html)

1) Indiquez la barre de progression sur le niveau HTML:

<my-app>
  <div style="width: 100%; background-color: grey;">
    <div id="myProgressBar" style="width: 1%; height: 30px; background-color: green;">
    </div>
  </div>
</my-app>

2) Chargez votre pack d'applications et injectez-le dans DOM manuellement via XMLHttpRequest

const tag = document.createElement('script');
const xhr = new XMLHttpRequest();
xhr.open('GET', 'my-angular-app-bundle.js?' + new Date().getTime());
xhr.onloadend = (e) => document.head.appendChild(tag);
xhr.send();

3) Utilisez XMLHttpRequest.onprogress pour suivre la progression et mettre à jour les paramètres de la barre de progression

const barElement = document.getElementById('myProgressBar');
xhr.onprogress = (e) => {
  if (e.lengthComputable) {
    const width = 100 * e.loaded / + e.total;
    barElement.style.width = width + '%';
  }
}

Pour rendre les mises à jour onprogress plus régulières, vous pouvez incrémenter la largeur de la barre de progression dans une boucle setInterval:

if (e.lengthComputable) {
  const endWidth = 100 * e.loaded / + e.total;
  const intervalId = setInterval(() => {
    const width = parseInt(barElement.style.width, 10);
    if (width >= endWidth) {
      clearInterval(intervalId);
    } else {
      width += 2; 
      barElement.style.width = width + '%'; 
    }
  }, 40);
}
6
dhilt

J'ai utilisé PACE dans mon application angulaire pour afficher la barre de progression de l'écran de démarrage . Vous pouvez également afficher à votre guise. Vous devez passer par le lien ci-dessous:

Barre de progression du chargement automatique des pages

J'espère que cela vous aidera.

2
Shubham Verma

Je ne pense pas que l'indicateur de chargement montre le chargement de l'application. Je pense que cela montre le chargement des données après le chargement de l'application. Pensez aux données telles que les e-mails, les contacts, etc. Je pense que le chargement de gmail est divisé en deux parties.

Partie 1: Afficher une animation simple (sans indicateur de chargement) pendant le démarrage de cette application.

Partie 2: Maintenant, l'application a commencé à afficher cette annimation de chargement. Ensuite, inventorisez le nombre de demandes de données que vous devez faire et ajoutez une barre de chargement à cet effet.

Vous pouvez utiliser this pour l'annimation de démarrage.

2
Robin Dijkhof

Parfois, le chargement basé sur les balises est plus efficace, vous pouvez utiliser la bibliothèque PreloadJS. Vous pouvez également suivre manuellement le chargement de fin de script à l'aide de l'événement onload et interpoler artificiellement la progression pour donner l'impression que l'application se charge à une vitesse constante. Gmail ne montre probablement pas du tout les progrès réels, il attend simplement la fin du chargement en affichant de faux progrès réguliers à l'aide de minuteries.

2
kemsky

Le seul moyen auquel je pense est de connecter votre application à la CLI et d'afficher la progression affichée à partir de la ligne de commande elle-même. 

0
KLTR