ESBuild - Firebase/Firestore data is only shown after I manipulate something in the dom

[10eputzen]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

After changing the builder from

"builder": "@angular-devkit/build-angular:browser"
to
"builder": "@angular-devkit/build-angular:browser-esbuild"

I experience a very weird behavior for my data that I get from firestore in my Angular App in Development [it works fine on production!].

The data is loaded (I can see it in the console) but it would not show in the html template.
If I resize the page or click any button on it, the data will suddenly appear.
I already tried changing between RXJS and Signals to deliver the data to my component, but only going back to webpack fixes the issue.

This is how I call an instance of firestore in my dataservice

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

Minimal Reproduction

1. Change the builder in angular.json from

"builder": "@angular-devkit/build-angular:browser"

to

"builder": "@angular-devkit/build-angular:browser-esbuild"

2. Load any data to your template via Firestore

Exception or Error

There is no error - just no data in the template

Your Environment

@angular-devkit/architect       0.1602.0
@angular-devkit/build-angular   16.2.0
@angular-devkit/core            16.2.0
@angular-devkit/schematics      16.2.0
@angular/cli                    16.2.0
@schematics/angular             16.2.0
rxjs                            7.8.1
typescript                      5.1.6
zone.js                         0.13.1

Anything else relevant?

It works fine on production (firebase hosting)

[clydin]

This appears to be a bug but we will need to look at a reproduction to find and fix the problem. Can you setup a minimal reproduction please?

You can read here why this is needed. A good way to make a minimal reproduction is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[10eputzen]

Ok I created a sample https://github.com/10eputzen/angularBugRepo

You just need to add your firebase (with firestore) config into to add some mock data.
The data just shows if a signal is changing (a signal watching the screen width) or if data is manimulated in the collection.

[Abutayar]

@10eputzen
Issue as per my finding

• when you invoke this.allData$.set(allData); in this value is setting but changeDetection is not invoke due to that effect is not invoke
• As for data show when you change screen is due to the addEventListener which trigger's the changeDetection
• so if you after invoking set invoke changeDetection manually your issue will be fix
• and for why it works on production - Not Sure (Still investigation)

Hope this helps

[alan-agius4]

This should been fixed by #25986 which will be available on NPM later this week.

If the problem persists in your application after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior. You can use ng new repro-app to create a new project where you reproduce the problem.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}