René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Version 5.4.2 breaks Angular Universal server rendering","articleBody":"### Version info\r\n\r\n\u003c!-- What versions of the following libraries are you using? Note that your issue may already\r\nbe fixed in the latest versions. --\u003e\r\n\r\n**Angular:**\r\n9.0.4 \r\n\r\n**Firebase:**\r\n7.9.3\r\n\r\n**AngularFire:**\r\n5.4.2\r\n\r\n**Other (e.g. Ionic/Cordova, Node, browser, operating system):**\r\n\r\n### How to reproduce these conditions\r\n\r\nHave an Angular Universal app that does an AngularFire query on page load. When you do this, you will see that `isStable` from the Angular `ApplicationRef` is immediately set to `true` at the moment of the database call.\r\n\r\nThis is a problem because it means the server response is sent back to the client BEFORE the data from the database is actually used to update the page (i.e. the server view does not contain the data even though it is returned).\r\n\r\nThis issue does not exist with Firebase `7.6.2` and AngularFire `5.3.0`. It only exists with Fireabase `7.9.3` and AngularFire `5.4.2`.\r\n\r\n**Failing test unit, Plunkr, or JSFiddle demonstrating the problem**\r\n\r\nN/A - I have this issue on a private repo, but have tested enough to confirm it almost certainly is an issue for anyone with this setup.\r\n\r\n**Steps to set up and reproduce**\r\n\r\nDo the following:\r\n\r\n1. Create an Angular Universal app with Angular 9+ and AngularFire `7.9.3`.\r\n2. In the `ngOnInit()` page lifecycle hook of any page, perform an AngularFire query. It can be any query\r\n3. Have a console.log() right after the AngularFire query completes and data is returned\r\n4. Add this code to the constructor of the page:\r\n\r\n```\r\nconstructor(ref: ApplicationRef) {\r\n  ref.isStable(isStable =\u003e console.log('isStable = ' + isStable);\r\n}\r\n```\r\n\r\nWhen you do this and load the app, you will see that `isStable` is set to true BEFORE the console.log from step 3 is executed. This means the server view is returned before we have a chance to do anything with the data coming back from AngularFire.\r\n\r\n**Sample data and security rules**\r\n\r\nN/A - issue not related to data or security rules\r\n\r\n### Debug output\r\n\r\n** Errors in the JavaScript console **\r\n\r\nN/A - there is no error, it is just that the data isn't included in the server view\r\n\r\n** Output from `firebase.database().enableLogging(true);` **\r\n\r\nN/A - related to firestore, not the realtime database\r\n\r\n** Screenshots **\r\n\r\nN/A - this is not a visual issue\r\n\r\n### Expected behavior\r\n\r\nThe expected behavior is that the Angular `ApplicationRef.isStable` is not set to true until after all async is complete AND the sync code that immediately follows the async code is complete.\r\n\r\n### Actual behavior\r\n\r\nThe actual behavior is that immediately when the AngularFire query is run, `isStable` is set to true and the server response immediately returns.\r\n","author":{"url":"https://github.com/jeffwhelpley","@type":"Person","name":"jeffwhelpley"},"datePublished":"2020-03-02T20:47:46.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":5},"url":"https://github.com/2341/angularfire/issues/2341"}