AngularFireStore breaks SSR, does not render web page #2420
Comments
|
It's almost as if AngularFire makes the query call, but it doesn't fire next() or some sort of interceptor issue? Ultimately the html doesn't get rendered to Chrome, but there's no error |
|
That sounds like a Zone.js issue. Note your on RC, give 6.0.0 final a shot. In the meantime I'll look at your repo, looping back to wrapping 6.0.1 shortly in which I'm aiming to button up a lot of these issues. |
|
@jamesdaniels Cool I appreciate it. I've tried with 6.0.0.rc-2 and 6.0.0, same issue. You can check the repo, but here's my package.json: Angular.json: |
|
I think my issue is related to this. #2416 I'm creating working repo with my problem from scratch now. |
|
No timeout error, the chrome page still remains it its 'loading' state with the 'X' in the top left, but no server errors, no webpage render |
|
@tskweres : Do you have a workaround right now? I have the same issue in my project and invested hours of debugging, but have no idea how to solve it. I'm not that familiar with zone.js. Btw. I can reproduce this issue with Angular 8 and Angular Fire 5.4.2 |
|
I don't, waiting on 6.0.1 :( Continuing to code running the app on the front-end until the fix is out |
|
I've checked today. I also have infinity loading when call |
|
@tskweres I've found that I face this problem when I trying to get only one item by id from the database. Examples:Articles page this.db.collection('articles', ref => ref.orderBy('date', 'desc')
.where('status', '==', status)
.startAfter(last.date)
.limit(count))
.valueChanges({ idField: 'id' }).subscribe(articles => {
this.updateSubjectByStatus(status, articles as Article[], isPush);
});Article page return this.db.doc('articles/' + id)
.snapshotChanges()
.pipe(
take(1),
map(doc => {
return {
id: doc.payload.id,
...(doc.payload.data() as object)
} as Article;
}));I changed my method by the following one and page seems to be working fine. Infinity loading gone. return this.db.collection('articles').doc(id).valueChanges(); |
|
I also use the My export class AuthService {
constructor(
private authFire: AngularFireAuth) {
}
isAuth() {
return this.authFire.authState;
}
}This is how I call this.authService.isAuth().subscribe(data => {
this.user = data;
});when I comment this code page loads well |
|
FYI:
|
|
Same issue here, fixed by downgrading back to 5.2.3 |
|
@urish can you post your package.json? I try running with @angular/fire 5.2.3, but it breaks AngularFireAuth, I'm assuming AngularFireAuth changed between 5.2.3 -> 6 |
|
Yes, you need to add
turns into
and possibly other methods |
|
@urish And what is the import at the top? Can I import AngularFireAuth? |
|
Yes, it hasn't changed |
|
@urish I appreciate the help here, still working through errors introduced by rolling back. Any idea how to avoid this one? Error: Uncaught (in promise): TypeError: app.firestore is not a function |
|
Tried removing node_modules and package-lock.json and re-installing, still there though, must be a version of one of the other packages |
|
I had to apply the following patch to fix this: diff --git a/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/server.js b/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/server.js
index d1c0a61..e74af64 100644
--- a/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/server.js
+++ b/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/server.js
@@ -40,7 +40,7 @@ function getServerConfig(wco) {
node: false,
};
if (bundleDependencies) {
- config.externals = [...externalDependencies];
+ config.externals = [...externalDependencies, /^firebase/];
}
else {
config.externals = [ |
|
I tried Angularfire at 5.2.3 and applied the fix you mentioned, but the original error of no web page rendering still persists. Here's my package.json Just gonna stick with the latest of everything I suppose, hopefully 6.0.1 fixes it soon |
|
I am facing the same issue here. I tried to keep console logs in my initial components to see if I can make out anything that breaks in between, but no use. I ran a simple universal application without angular fire and it works very fine. But this is causing an infinite loading issue. I am out of options. Below is my |
|
@tskweres You can check my Angular 9 Universal + Firebase sample project angular-universal-firebase. It seems to be working with the following code: return this.db.collection('articles').doc(id).valueChanges();but there's still infinity loading when I try get an authState. |
But honestly, do we need auth to work in server? I mean you just need to present it in client end right? My current solution which I am following is to check whether I am on server with But unfortunately, I had to skip all my db calls for now. Not sure what's wrong with the db calls.
Then in my component, I would do as below: In my case, I suspect that |
|
@jamesdaniels Definitely some crazy RxJS stuff going on. I found it works if:
Hope that helps! |
|
@kshkrao3 Thank you for the solution. I call auth only at browser and infinity loading gone. |
|
@n3nikita Tell me something, do you use |
When I use the following code I get an infinity loading: getById(id: string): Observable<Book> {
return this.db.doc('books/' + id)
.snapshotChanges()
.pipe(
take(1),
map(doc => {
return {
id: doc.payload.id,
...(doc.payload.data() as object)
} as Book;
}));
}so I changed my code to the following: getById(id: string): Observable<Book> {
return this.db.collection('books').doc<Book>(id).valueChanges();
}I think the problem might be connected with rxjs operators. |
|
Any update on this I cannot get the Firebase functions to deploy using Firestore. I have tried everything mentioned in this thread with no avail. |
|
@tbacon1991 .. As for now, we are waiting for the v6.0.1 and hopefully it resolves these issues. Bdw, what's the error you are getting? |
|
@jamesdaniels The sample SSR you are having includes any piece of code wherein you have added pipe, map operators something like mentioned in this comment? |
|
Hey @jamesdaniels
Is this sample public? Maybe we can take a look? Thanks |
Hey @jamesdaniels , I am definitely getting this issue as well when using ssr, angularfire 6.0.3, firebase 7.21.1 and angular cli 10.1.3. Any use of pipes will cause a hang. |
@jamesdaniels , @jadengis, I've setup a simple repo to test firestore, ssr. Hangs when using a resolver and ssr. Works fine as a normal browser app. https://github.com/odenman250/angularfire-ssr-test |
|
Como ustedes han probado, las libreria Angularfire rompe SSR, igual que FlexLayout y tantas otras. |
|
@jamesdaniels Not to pester you too much, but @odenman250 provided a reproduction scenario of the hang we are experiencing in the new versions of angular/fire. Would you be able to take a look and provide an update for this issue? As I've commented earlier in this thread, through testing i determined this issue was introduced in v5.4.0 (v5.3.1 works as expected). I took a look at that PR and noticed that there were a number of changes involving zone and runOutsideAngular which are likely to be the cause of this issue I think. |
|
It's not strictly AngularFire, I was able to repro in my app when I updated the Firebase SDK. I will look into this but don't have a work around available yet. |
|
A lot of what I've done with AFs Zone wrapping is defensive, but it's possible Firestore is setting up a timer, socket, or something outside of the scope. In the future I am working to bring proper zone patching to Firebase, rather than all this Zone wrapping/unwrapping and messing with schedulers, but no ETA that I can share. |
|
Could this be related to the long-polling behaviour? I've notice in the browser that when using |
|
Hmm so I went back an upgraded my app to firebase: 8.0.0 and @angular/fire: 6.0.4, to test my long polling question up above, and it appears as if the firestore hangs are fixed with this combination of versions. I'd recommend others in this thread try it out! |
|
That's great. FWIW I'm now seeing AngularFireDatabase breaking Zone.js in conjunction with Firebase v8 instead... |
|
@jadengis that's promising to hear. I am still getting the hang unfortunately on firebase 8.0.0 and @angular/fire: 6.0.4. I'll do some more testing though. Using rxjs take(1)/first causes hang still. |
|
@odenman250 Are you using resolvers? I was experiencing this issue before using resolvers, but I recently switched to doing data fetching in guards and storing in ngxs store (because guards are run hierarchically and resolvers are not). Maybe that explains why I'm not seeing this issue any more. I am using I would also try adding firebase 8.0.0 and @angular/fire: 6.0.4 to your package.json and then nuking your package-lock.json and node_modules folder and reinstall everything from scratch. I was having some major issues until i tried that. |
|
@jadengis thanks for that. Yeah I'm using resolvers. I just updated the test repo and nuked the package-lock.json and node_modules but still getting the hang in ssr. Repo here - https://github.com/odenman250/angularfire-ssr-test. So seems like the observable isn't completing on server side still. I've tried with dev and prod builds as well. Good to know about the guards. |
|
As a newbie to Angular, I had the same issue. In my simple use case, however, I was able to solve the problem by manually subscribing to the observable:
I did not try with pipes added, also I did not try if async-pipe works. I hope this "quick hack" helps some, that found this issue through google. Also it seems the moment I call unsubscribe() on this subscription the page loads forever again. |
|
I found the database zone issue that remained, it turns out making a ref has side-effects, so I had to wrap it to run outside of Angular. Please open a new issue if you find any additional zone issues. |
|
@jamesdaniels awesome news, so is there a patch coming? Or what's the versions of firebase, angular fire, and angular we should be using for this to all work swimmingly? Appreciate all the work here :) |
|
I'd suggest Firebase 8.0.1 (or 8.0.3 when released, skip 8.0.2 as it has a bad bug with Firestore), AngularFire 6.1, and NG 10+. |
|
AF 6.1 dropped last night with the most recent Zone.js fix for database. |
|
thank you! |
|
Wonderful news. Will test this and report if any. Thank you so much @jamesdaniels .. 👏 |
|
Still doesnt work ... :/ |
|
This workaround seems to help #2686 (comment) |
Same for me. I updated my test repo as per @jamesdaniels advise but still getting the hang (updated to Firebase 8.0.1 and AngularFire 6.1). Test repo link - https://github.com/odenman250/angularfire-ssr-test |
|
@jamesdaniels Why are you closing this issue? It doesnt work with versions you mentioned |
|
There are multiple related bugs. IMO I addressed the original issue reported here. There are also work arounds. |
|
The solution mentioned here fixed it for me: |
and others
Test Repo here, simply clone it, npm install, and npm run dev:ssr
https://github.com/tskweres/angularfire-ssr-test
** make sure to input your own firebaseConfig in the environments
In the app.component.ts, you'll see that I inject AngularFireStore, and then make a query on a collection.
The query completes and the console logs the result, but when launching the browser in chrome, the web page never renders.
If I do not make the this.db.collection('.....') call, the web page renders.
Any ideas?
The text was updated successfully, but these errors were encountered: