web-dev-qa-db-fra.com

Pourquoi le composant Angular ne se charge-t-il pas lors de la navigation avant / arrière du navigateur?

Angulaire 7.2.13

Lorsque vous naviguez avec le bouton de retour du navigateur, le code HTML du composant est chargé, mais le composant css/js n'est pas chargé et la page se bloque.

Cependant, le chargement fonctionne correctement lors de la navigation par un clic sur un lien ou router.navigateByUrl () ou si la page est rechargée. Mais jamais lorsque vous naviguez avec le bouton avant/arrière.

Je ne reçois aucune erreur de console.

Il fonctionne parfaitement sur le serveur de développement http://localhost:4200/. Ce problème se produit uniquement en production.

[~ # ~] mise à jour [~ # ~]

Cela se produit dans un parcours enfant.

MISE À JOUR 2

Impossible de reproduire le problème dans un stackblitz avec la même structure d'itinéraire. https://angular-tpsr5z.stackblitz.io/ .

MISE À JOUR 3

Lorsqu'il se bloque, le précédent et le nouveau routage html sont affichés.

Après avoir suspendu ainsi, le composant se charge immédiatement si je clique sur tout ce qui déclenche une méthode de composant ou modifie une propriété du composant.

MISE À JOUR 4

Paquet Json

{
  "name": "tuilder-ng",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.13",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^7.2.13",
    "@angular/compiler": "^7.2.13",
    "@angular/core": "^7.2.13",
    "@angular/forms": "^7.2.13",
    "@angular/http": "^7.2.13",
    "@angular/material": "^7.3.7",
    "@angular/platform-browser": "^7.2.13",
    "@angular/platform-browser-dynamic": "^7.2.13",
    "@angular/router": "^7.2.13",
    "@ecodev/fab-speed-dial": "^3.1.0",
    "@google/markerclustererplus": "^2.1.11",
    "@swimlane/ngx-charts": "^10.1.0",
    "@types/googlemaps": "^3.30.19",
    "@types/lodash": "^4.14.123",
    "chart.js": "^2.8.0",
    "core-js": "^2.6.5",
    "lodash": "^4.17.11",
    "moment-timezone": "^0.5.23",
    "ng2-charts": "^1.6.0",
    "ngx-material-timepicker": "^2.13.0",
    "ngx-order-pipe": "^2.0.2",
    "rxjs": "^6.4.0",
    "thenby": "^1.3.0",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.8",
    "@angular/cli": "^7.3.8",
    "@angular/compiler-cli": "^7.2.13",
    "@angular/language-service": "^7.2.13",
    "@types/jasmine": "^3.3.12",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "^10.12.30",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.5",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "^5.4.2",
    "ts-node": "^8.0.3",
    "tslint": "~5.12.1",
    "TypeScript": "3.2.4"
  }
}

Redirection de serveur .htaccess

RewriteEngine On

RewriteCond %{HTTPS} off
RewriteRule .* https://%{HTTP_Host}%{REQUEST_URI} [L,R=301]

Options +FollowSymLinks
DirectoryIndex index.html

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^[a-zA-Z0-9-_.\/]+$ index.html

MISE À JOUR 5

Réduisez la démo du problème: https://ngtest.emanweb.design/

angularangular-componentsangular-router
14
Emmanuel

Le problème a été résolu en désactivant ModPagespeed dans Nginx pour ce domaine particulier.

pagespeed Disallow "https://*example.com/*";

ModPagespeed interagissait d'une manière ou d'une autre avec Angular pour provoquer ce comportement étrange.

Alternativement, la vitesse de page peut être désactivée par URL en ajoutant: ?ModPagespeed=off

7
Emmanuel