I have encountered a peculiar issue with my Angular 2 application specifically on Firefox and all iOS browsers (Firefox, Safari).
Whenever a user navigates to the /reports route in my application, I am making a REST API call using the ngOnInit method to fetch JSON data.
This snippet shows how I handle the data loading in my ngOnInit method:
ngOnInit() {
//this.service is my service for fetching reports
this.service.getReports(this.categoryId).subscribe(res => {
this.testReports = res;
}
}
After receiving the response, I render the reports in the HTML file:
<div class="cat-item-holder" *ngFor="let singleCategory of testReports; let i=index">
{{singleCategory.name}}
</div>
In Chrome, all the reports are immediately visible upon entering the /reports page. However, on Firefox and Safari, the application seems to 'hang' and requires multiple clicks on the page for the API results to show up.
Is there a solution to fix this issue? Could it be related to the ngOnInit method?
Here is an excerpt from my angular-cli.json file:
{
"project": {
"version": "1.0.0-beta.22-1",
"name": "APPNAME"
},
...
}
-- My package.json file:
{
"name": "front",
"version": "0.0.0",
...
}
Lastly, here is how I implemented my reports service:
import {Injectable } from '@angular/core';
...
export class ReportsService {
constructor(private http:Http , private mainService:MainService) {
this.http = http;
}
getReports(categoryId) : Observable<Response> {
...
}
}
While viewing my reports page on Firefox, I noticed a small scroll in the upper right corner of the loading section. Clicking on this scroll a few times properly renders the reports in Firefox. Could this be a DOM-related issue?
Update: I found a temporary workaround by adding some code to app.component.ts and reports.ts:
import {ApplicationRef} from '@angular/core';
export class AppComponent {
constructor(private _applicationRef: ApplicationRef, private _router: Router) {
setInterval(() => {
this._applicationRef.tick();
}, 5000);
}
}
constructor(private ref: ChangeDetectorRef) {
setInterval(() => {
this.ref.detectChanges();
}, 5000);
}
Now, after 5 seconds of the page load in Firefox, there is a slight hang-up of the browser, but the results are successfully rendered. Is there a way to prevent this hang-up?