4
votes

Index angulaire.html avec des valeurs dynamiques | web-worker

Jusqu'à récemment, nous utilisions express.js pour servir index.html pour Angular, car nous devons remplir les variables dynamiques de la base de données avant le démarrage de l'application.

<script> window .__ envs = {{{json envs}}} </script>

Cependant, le nouveau Angular 7 met en cache la source index.html via Web-worker.

Donc, lorsque je charge le Web, il ne se charge pas correctement tant que je n'ai pas cliqué sur le rechargement.

J'ai essayé de désactiver index.html du webworker. Rien ne s'est passé.

J'ai essayé de désactiver le web-worker et de le supprimer partout. Maintenant, je n'ai pas besoin d'utiliser un rechargement dur, mais le premier chargement affichera le fichier source au lieu du fichier modifié via express.js

1) Pourquoi la source charge-t-elle le fichier source et y accéder?

2) Puis-je le configurer dans un webworker?

angular web-worker

2 commentaires

Pouvez-vous s'il vous plaît ajouter un exemple de code de webworker qui met en cache votre index.html?

si vous avez besoin de variables d'une base de données avant les étoiles de l'application, pourquoi ne pas utiliser APP_INITIALIZER?

3 Réponses :

3
votes

Vous pouvez utiliser APP_INITIALIZER dans votre module et utiliser une usine pour charger le service du fournisseur comme ci-dessous:

export function ServiceProviderFactory(provider: ServiceProvider) {
  return () => provider.getInitialData();
}

votre service pour récupérer les données en tant que service:

@Injectable()
export class ServiceProvider{
constructor(private http: Http) {

    }

getInitialData(){

 // your fetch logic from API
 }
}

0 commentaires

0
votes

Il est normal que votre fichier index soit mis à jour après avoir été actualisé deux fois.

Le mécanisme de mise en cache implémenté par le Service Worker vérifiera la somme de hachage pour détecter toute modification du fichier. Si les hachages sont différents, la nouvelle version sera téléchargée et mise en cache (mais ne l'affichera pas à partir de la première fois).

Après avoir actualisé la deuxième fois, vous verrez la version mise à jour.

Si vous n'avez pas du tout besoin du cache, vous pouvez désactiver votre service worker depuis le angular.json :

"configurations": {
     "production": {
          "serviceWorker": false,
          "ngswConfigPath": "src/ngsw-config.json"
     }
}

De plus, vous peut écouter les modifications (le travailleur logiciel détecte lorsqu'une nouvelle version est trouvée) et afficher un message approprié aux utilisateurs avec un bouton pour actualiser la page. Regardez ici comment attraper et gérer le processus de mise à jour.

Bonne chance!

0 commentaires

1
votes

Merci pour les réponses, mais aucune ne peut résoudre mon problème exactement. Je ne peux pas utiliser APP_INITIALIZER car je ne connais pas API_URL pour le moment et c'est l'une des choses que je dois transmettre à l'application. Il s'agit d'une valeur dynamique et ne peut donc pas faire partie de process.env .

La désactivation de la mise en cache index.html ne fonctionne pas correctement pour moi.

Mais la solution est assez simple.

Au lieu de changer directement le fichier index.html, j'y mets et j'ai exposé ce fichier dans express.js

app.get('/envs', async (req, res) => {
    const envs = ...
    res.end('window.__envs = ' + JSON.stringify(envs))
})

0 commentaires