0

We are using Cloudflare and Angular 4 for almost 2 years in our app and we had no issues until recently when we discovered on some of the team Macs the pages do not load or they remain in spinning wheel forever. We checked the console and no errors appeared and also accessed the app via the IP address and it worked perfectly. If i do a browser purge cache on Chrome it works but on Safari or Firefox that does not work. We tried purge cache from cloudflare multiple times but that does not solve the issue...

Sometimes it loads the content sometimes it doesn't. Also we saw that issue on mobile phones that we test the app... We narrowed down to a caching problem.

We tried to bypass the caching on html and js files from cloudflare page rules but we still have issues with it. We do not know exactly what to do and do not know what extra information to provide because there isn't much we can lookup on.

Any help or direction to check are welcomed. We are concerned with our daily users who might start to experience the same problem as us. I want to mention that the problem does not appear after a deploy, it appears random and it needs a clear cache from the browser to work for a few reloads.

EDIT 1: I want to mention that when this happens, the app does not enter in app.component.ts. I've put some console logs into the constructor and it does not reach that point. the only thing that i can see in the source of the loaded white page is that app-root element is loaded and that it's.

EDIT 2: I've put pointed another doimain that we have to the same ip and it works perfectly...

package.json dependencies: 

"dependencies": {
"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"angular2-infinite-scroll": "^0.3.43",
"angular2-material-datepicker": "^0.5.0",
"angular2-toaster": "^4.0.1",
"angular4-carousel": "^3.1.8",
"angulartics2": "^4.6.3",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"file-saver": "^2.0.0",
"fuzzyset.js": "0.0.7",
"jquery": "^3.1.0",
"mydatepicker": "^2.2.0",
"ng-lazyload-image": "^3.1.1",
"ng-semantic": "https://github.com/vladotesanovic/ngSemantic/tarball/master",
"ng2-datepicker": "^2.1.4",
"ng2-file-upload": "^1.1.3-0",
"ng2-ion-range-slider": "^2.0.0",
"ngx-image-cropper": "^1.2.4",
"ngx-stripe": "^0.8.2",
"node-sass": "^4.11.0",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"

},

Thank you in advance!

mariobyn
  • 86
  • 7
  • Please have a look at the below mentioned link. YOu have to also tell me that when you get the particular problem does hard reload of the page solves it? https://stackoverflow.com/questions/34808023/how-to-clear-template-cache – Abhijeet Chakravorty Mar 09 '19 at 07:41
  • Hey, thank you for your response. Yes the hard refresh on Chrome solves it, on other browsers, no. – mariobyn Mar 09 '19 at 10:08
  • Most welcome :). Did you try the solution which I have posted in the previous comment? – Abhijeet Chakravorty Mar 09 '19 at 10:18
  • Hey, yes, i tried to put the compile.clearCache() but the problem is that the app does not reach app.component. I edited the question with more details. – mariobyn Mar 09 '19 at 10:27

0 Answers0