Why is Angular component not loading on browser back/forward navigation?

Question

Angular 7.2.13

When navigating with the browser back button, the HTML of the component is loaded, but the component css/js is not loaded, and the page hangs.

However loading works fine when navigated by a link click or router.navigateByUrl() or if the page is reloaded. But never when navigating with the forward/back button.

I'm getting no console errors.

It works perfectly on the development server http://localhost:4200/. This issue occurs only in production.

UPDATE

This is happening in a child route.

UPDATE 2

Can't replicate the issue in a stackblitz with the same route structure. https://angular-tpsr5z.stackblitz.io/.

UPDATE 3

When it hangs both the previous and the new route html are shown.

After hanging like this the component will immediately load if I click anything that fires a component method, or changes a property of the component.

UPDATE 4

Package 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"
  }
}

Server Redirect .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

UPDATE 5

Cut down demo of the issue: https://ngtest.emanweb.design/

This could be a long shot, but is it possible that you have data being loaded in one of the other lifecycle hooks that isn't being fired, and your template is waiting for some var to be set? — BizzyBob, Apr 25 '19 at 01:36
Also, I've seen weird problems in production-only because of AOT. It may be worth a shot disabling that if you have it on, just to see if it makes a difference. — BizzyBob, Apr 25 '19 at 01:36
Disabling AOT didn't make a difference. After clicking back and the page has hung, clicking on a drop-down in the main frame which updates an ngModel (not the child router outlet), triggers the component to load... it's pretty weird, but there's some timing, lifecyle, or other issue going on. — Emmanuel, Apr 25 '19 at 01:43
Would you create an online example from https://stackblitz.com/ — Chunbin Li, Apr 25 '19 at 01:48
can you please try using `useHash: true` on your RouterModule import ? `@NgModule({ imports: [RouterModule.forRoot(routes, {useHash: true})] }` this will add `#` to your routes, making sure the browser doesn't navigate to the server which, I'm guessing, isn't serving `index.html` for some reason. this will also explain why it works great on localhost and not on prod — Stavm, May 01 '19 at 11:35
@Stavm Thanks for the suggestion. I tried that but unfortunately it didn't resolve the issue. — Emmanuel, May 01 '19 at 11:41
@Emmanuel there is an error somewhere. I recognise the double routes shown, but something is eating away the error. Are you by any chance using a state management system and/or route guards? Also, what kind of server technology are you using? — Poul Kruijt, May 01 '19 at 11:43
I've logged the router events, which are working perfectly. Initially I thought it was a router issue, but I think it might be component life-cycle related... not sure. — Emmanuel, May 01 '19 at 11:43
@PierreDuc Linux, Nginx, Apache, Php-fpm. Straightforward server — Emmanuel, May 01 '19 at 11:46
@Emmanuel can you post your package.json? To get an idea of what kind of packages you are using in your app. As well perhaps the redirect code you are using for apache and nginx — Poul Kruijt, May 01 '19 at 11:47
@PierreDuc Ok have done. See update in the question. I'm confident the issue is client-side. — Emmanuel, May 01 '19 at 11:51
@Emmanuel Have you tried `ng serve --prod`, to find a way to reproduce it locally — Poul Kruijt, May 01 '19 at 11:54
@PierreDuc the issue does NOT occur locally with `ng serve --prod` — Emmanuel, May 01 '19 at 12:05
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/192669/discussion-between-pierreduc-and-emmanuel). — Poul Kruijt, May 01 '19 at 12:07
@PierreDuc I've created a demo: https://ngtest.emanweb.design/ — Emmanuel, May 05 '19 at 06:37

score 7 · Accepted Answer · answered May 05 '19 at 07:55

The issue was resolved by turning off ModPagespeed in Nginx for that particular domain.

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

ModPagespeed was interacting in some way with Angular to cause this weird behaviour.

Alternatively pagespeed can be turned off per url by appending: ?ModPagespeed=off

Why is Angular component not loading on browser back/forward navigation?

1 Answers1