Angular 应用程序在将一个视图导航到另一个视图时冻结，并且具有 HTTP 请求的高负载响应

Question

I have an angular 9.1.11 application that is gets freezed after navigating from navigating from one page to another page (different module with lazy loading).

My scenario is like:

• I have an action button View Report that navigates to different route say /reportData with query params appended /reportData?reportId=XYZ&reportDate=YZX .

• In my ReportComponent, I'm taking the queryParams from ActivatedRoute and using the params I'm calling a HTTP request

• the Request will respond with heavy payload with 4-5 mb minimum as response.

When I click the View Report the page freeze, after few seconds it redirecting to /reportData?reportId=XYZ&reportDate=YZX and after that HTTP call gets hit.

Additional information:

• I added timer to track how log and where the freeze take place using Console.time()

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 component that presents the problem is the following:

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>&nbsp;</p><p><strong>Child Report:
                 ${index + 1}</strong></p> ${reportData.reportHTML}`;
            });
        resolve(finalContent);
    });
}

}

Answer 1

why are you dragging data with route params that too of such huge amount. even if it's to a single route or taking between multiple routes, pass very fewer data with route params or query string,. of say, simple string, small object or small array.

My Suggestion would be

1. instead of passing your data in route try to save in local storage/ session storage this way you can fetch 4-5mb data easily.
2. data in your route will be present till your 'angular's session' lasts (as it being a single page application) once you refresh your page angular will lose its data as it stores the request temporally in the method being called once you refresh the method it loses the data. also, what will you do in case your route fails, your data will be lost!
3. because you are storing all the data in local storage you can access data at any point of time during the application run you can also encode your data using atob() method for security purpose. and also do not forget to delete the data once done.