Strange behavior in compiled Angular 18 application TypeError: this._serviceXXXXXXXX is not a function

Question

We are facing strange error in our application, some users facing problems with export functionality. Code below is what we have in our codebase:

exportProcess = this.exportProcessSubject.pipe(
        switchMap(() => {
            const filters: { [index: string]: string | number | boolean | Date } = {};
            Object.entries(this.filterValue()?.filters ?? {}).forEach(([key, value]) => {
                if (value instanceof Date) {
                    filters[key] = value.toISOString();
                } else {
                    if (value) {
                        filters[`filter[${key}]`] = value.toString();
                    }
                }
            });

            if (this.sort()?.active) {
                filters[`sort[${this.sort()!.active}]`] = this.sort()!.direction;
            }
            const dialogRef = this._dialog.open(ProgressDialogComponent, {
                width: '400px',
                disableClose: true,
                data: {
                    diameter: 100,
                    label: 'Eksportuję notatki i zadania...',
                    labelSignal: this._exportLabelSignal,
                } as ProgressDialogData,
            });

            dialogRef.afterClosed().subscribe(() => {
                this._webSocketService.closeConnection();
            });

            this._exportLabelSignal.set('Trwa przygotowanie eksportu zadań i notatek');
            return this._notesAndAssignmentsImportExportFacade.exportNotesAndAssignments(filters).pipe(
                tap((websocketUrl) => {
                    this._exportLabelSignal.set('Trwa exportowanie zadań i notatek');
                    this._webSocketService.connectToEndpoint(websocketUrl);
                }),
                switchMap(() => this._webSocketService.getMessages()),
                filter((message: INotesAndAssignmentsExportImport) => message.status?.value === 'Completed'),
                tap(() => {
                    this._exportLabelSignal.set('Pobieram plik');
                }),
                switchMap((message: INotesAndAssignmentsExportImport) => {
                    return this._filesFacade.getFile(message.uploadedFileId);
                }),
                switchMap(({ blob, filename }) => {
                    return of(this._utilFilesService.downloadFromUrl(URL.createObjectURL(blob), filename));
                }),
                takeUntil(this._destroySource),
                tap((result: boolean) => {
                    if (result) {
                        dialogRef.close();
                        this._webSocketService.closeConnection();
                        this._toast.success('Plik został pobrany pomyślnie');
                    }
                }),
                catchError((error) => {
                    console.error('Export/Download error:', error);
                    dialogRef.close();
                    this._webSocketService.closeConnection();
                    this._toast.error('Błąd podczas eksportu lub pobierania pliku');
                    return EMPTY;
                }),
            );
        }),
    );

And now for some users this works but some getting following error: Export/Download error: TypeError: this._filesFacadeXXXXXXXX is not a function

What I was able to find is that for those users whom this works source code in browser looks like this:

However, for users whom this won't work have this in sources:

My question is: what could be causing the problem?

As far as I know users are getting the same compiled code (names of chunks are the same). I don't have this problem on windows 11 and chrome but my friend also on windows 11 and chrome do have this. I was able to reproduce problem on my private Mac and chrome browser.

this looks really unlikely, unless someone modified sources or someone during debugging has overrwritten the code in the sources tab — Andrei
– Andrei, Commented Oct 16 at 15:03
No chance something like this happened, I also was wondering if it's browser version mismatch but seems like not. On the same computer and different browsers error occurs, but on other computer on different browsers it works. — wujekkiryl
– wujekkiryl, Commented Oct 16 at 17:29
well, then check what comes through network on network tab. something replaced this line in the sources, you just have to find where exactly that happened — Andrei
– Andrei, Commented Oct 16 at 21:24
This chunk file inspected in network tab also have this strange this._filesFacadeXXXXXXXX on my personal computer. — wujekkiryl
– wujekkiryl, Commented Oct 17 at 10:52
I also tried to download those chunks via postman with the same results, on my private computer gets different file (with his._filesFacadeXXXXXXXX) but on my company computer its his._filesFacade.getFile. So it's not any browser extension that causes this. Also curl in bash and zsh gives the same results. Any idea where to look further? And more - meanwhile we deployed a newer version of app and problem remains. — wujekkiryl
– wujekkiryl, Commented Oct 23 at 11:20

wujekkiryl · Accepted Answer · 2025-10-27 12:20:13Z

0

Finlay we found where the problem was and it was WAF. I've found this when once the problem occurs on my working laptop and noticed that problem occurs only if I'm not connected to company VPN. Otherwise firewall was editing served files.

Thank you @Andrei for your replies.

answered Oct 27 at 12:20

wujekkiryl

1011 gold badge1 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Strange behavior in compiled Angular 18 application TypeError: this._serviceXXXXXXXX is not a function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related