Angular 为什么在浏览器的前后导航中不加载角度组件?
角度7.2.13 使用browser back按钮导航时,会加载组件的HTML,但不会加载组件css/js,页面会挂起 但是,当通过链接单击或router.navigateByUrl()导航或重新加载页面时,加载工作正常。但在使用“前进/后退”按钮导航时,绝对不会 我没有收到任何控制台错误。 它在开发服务器上完美地工作Angular 为什么在浏览器的前后导航中不加载角度组件?,angular,angular-components,angular-router,Angular,Angular Components,Angular Router,角度7.2.13 使用browser back按钮导航时,会加载组件的HTML,但不会加载组件css/js,页面会挂起 但是,当通过链接单击或router.navigateByUrl()导航或重新加载页面时,加载工作正常。但在使用“前进/后退”按钮导航时,绝对不会 我没有收到任何控制台错误。 它在开发服务器上完美地工作http://localhost:4200/。此问题仅在生产中出现 更新 这是在儿童路线上发生的 更新2 无法在具有相同路线结构的stackblitz中复制问题。 更新3 当它挂
http://localhost:4200/
。此问题仅在生产中出现
更新
这是在儿童路线上发生的
更新2
无法在具有相同路线结构的stackblitz中复制问题。
更新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
减少问题演示:通过关闭特定域的Nginx中的ModPagespeed,问题得以解决
pagespeed Disallow "https://*example.com/*";
ModPagespeed以某种方式与Angular交互,导致了这种奇怪的行为
或者,可以通过附加以下内容来关闭每个url的pagespeed:
?ModPagespeed=off
,这可能是一个长期问题,但是否有可能您的数据正在加载到另一个未启动的生命周期挂钩中,而您的模板正在等待设置某个变量,因为AOT,我在生产中看到了奇怪的问题。禁用AOT是值得一试的,如果你有它的话,只是为了看看它是否有区别。禁用AOT并没有区别。单击“上一步”且页面已挂起后,单击主框架中更新ngModel(而非子路由器出口)的下拉列表,触发组件加载。。。这很奇怪,但存在一些时间、生命周期或其他问题。您是否可以创建一个在线示例?请尝试在RouterModule导入中使用useHash:true
@NgModule({imports:[RouterModule.forRoot(routes,{useHash:true})]}
这会将#
添加到您的路由中,确保浏览器不会导航到服务器,我猜,由于某种原因,该服务器不提供index.html
。这也将解释为什么它在本地主机上工作得很好,而不是在prod上