Angular 7.2.13
使用浏览器后退按钮导航时，加载了组件的HTML，但没有加载组件css/js，导致页面挂掉。
然而，当通过链接点击或 router.navigateByUrl() 导航或页面重新加载时，加载工作正常。但在使用前进/后退按钮导航时绝不会。
我没有收到任何控制台错误。
它在开发服务器 http://localhost:4200/ 上完美运行。此问题仅在生产中出现。
更新
这是在子路由中发生的。
更新 2
无法在具有相同路由结构的 stackblitz 中复制该问题。 https://angular-tpsr5z.stackblitz.io/ .
更新 3
当它挂起时，会显示以前的和新的路由 html。
像这样挂起后，如果我单击任何触发组件方法或更改组件属性的内容，组件将立即加载。
更新 4
打包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"
}
}
服务器重定向.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
更新 5
砍下demo的问题:https://ngtest.emanweb.design/
最佳答案
通过在该特定域的 Nginx 中关闭 ModPagespeed 解决了该问题。
pagespeed Disallow "https://*example.com/*";
ModPagespeed 以某种方式与 Angular 交互导致了这种奇怪的行为。
或者，可以通过附加以下 url 来关闭 pagespeed:?ModPagespeed=off
关于angular - 为什么 Angular 组件没有在浏览器后退/前进导航中加载？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55840215/