I am encountering an issue with my Angular 9.1.11 application where it freezes after navigating from one page to another (which belongs to a different module with lazy loading).
Here is the scenario:
There is an action button called
View Reportthat redirects to a different route, let's say/reportData, with query parameters like
./reportData?reportId=XYZ&reportDate=YZXIn my ReportComponent, I extract the query parameters from
ActivatedRouteand use them to make an HTTP request.The HTTP response contains a heavy payload of minimum
4-5 mb.
When I click on View Report, the page freezes for a few seconds before redirecting to
/reportData?reportId=XYZ&reportDate=YZXAdditional information:
- I have added timers using Console.time() to track where the freeze occurs.
viewReport: 0.004150390625ms Start --> from page One
viewReport: 186.335205078125ms Report - OnInit --> Freezed
viewReport: 17733.464111328125ms Report - After ViewInit
viewReport: 17754.35009765625ms - viewReport fetchHttp Inital --> HttpRequest with upto 4-5 mb response
viewReport: 23164.468994140625ms Report - viewReport fetchHttp subscribed
viewReport: 23188.69091796875ms Report - fetchHttp subscribed End
viewReport: 23188.951904296875ms End
The problematic components are as follows:
Page One:
viewReport(reportForm: FormArray | FormGroup) {
console.time("viewReport");
console.timeLog("viewReport", "Start");
const queryParams: Params = {
reportId: reportForm.get("reportUuid").value,
reportDate: reportForm.get("reportDate").value
};
this.router.navigate(["/reportData"], {
queryParams,
queryParamsHandling: "merge" // remove to replace all query params by provided
});
}
Report Component:
@Component({
selector: "kt-report-view",
templateUrl: "./report-view.component.html",
styleUrls: ["./report-view.component.scss"],
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [ReportService]
})
export class ReportViewComponent implements OnInit, OnDestroy, AfterViewInit {
reportData: string;
reportLoader$: BehaviorSubject<boolean> = new BehaviorSubject(false);
private reportId: string;
private reportDate: any
constructor(
private router: Router,
private reportService: ReportService,
private activatedRouter: ActivatedRoute
) {}
ngOnInit() {
console.timeLog("viewReport", "Report - OnInit"); // Freezes Here
const bodyName = document.getElementsByTagName("body")[0];
bodyName.classList.add("bg-white");
}
ngAfterViewInit(): void {
console.timeLog("viewReport", "Report - After ViewInit");
this.activatedRouter.queryParams.subscribe(
(res: { reportId: string; reportDate: any }) => {
if (res) {
this.reportId = res.reportId;
this.reportDate = res.reportDate;
this.fetchReportData(); // calling HTTP Request
}
}
);
}
ngOnDestroy(): void {
const bodyName = document.getElementsByTagName("body")[0];
if (bodyName.classList.contains("bg-white")) {
bodyName.classList.remove("bg-white");
}
}
fetchReportData() {
console.timeLog("viewReport", "Report - viewReport fetchHttp Inital");
this.reportLoader$.next(true);
this.reportService.getReportData(this.reportId, this.reportDate).subscribe(
async (report: any) => {
console.timeLog("viewReport", "Report - viewReport fetchHttp subscribed Inital");
const data: any = await this.constructOverAllHtml(report);
console.timeLog("viewReport", "Report - fetchHttp subscribed End");
this.reportData = data;
this.reportLoader$.next(false);
console.timeEnd("viewReport");
},
(err) => {
this.reportLoader$.next(false);
console.log(err);
}
);
}
private constructOverAllHtml(report: any): Promise<any> {
return new Promise((resolve, reject) => {
let finalContent: string = "";
const mainReportHTML = report.mainReport.reportHTML;
finalContent = mainReportHTML;
if (report.childReport)
report.childReport.map((reportData: any, index: number) => {
finalContent += ` <p> </p><p><strong>Child Report:
${index + 1}</strong></p> ${reportData.reportHTML}`;
});
resolve(finalContent);
});
}
}