Repository navigation
Angular SSR Infinite Loading On First Load #30438
Description
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
Yes
Description
I have am having an issue with Angular SSR where a page doesn't load/hangs infinitely (X on the navbar forever, developer tools network activity blank) if navigated directly or opened in a blank tab, and only on the first time. If I refresh the page/navigate to the page again, it loads instantly.
This issue might sound familiar to some, because the symptoms aren't. I read about a dozen issues both under this repo and angularfire (I am using firebase) that describe similar problems since from the days of Angular 9. Unfortunately they all seem to revolve around different sources that are no longer relevant (a lot has changed since the days of Angular 9) so after a week of wrestling with this, I find myself having to open this issue.
The onInit of the component is as follows
ngOnInit() {
const itemsRef = collection(this.db, "items");
const viewsRef = collection(this.db, "views");
this.route.params.subscribe(p => {
const id = this.route.snapshot.paramMap.get('id');
const game = this.route.snapshot.paramMap.get('game')
const queryI = query(itemsRef, where("folder", "==", id));
const querySnapshot = getDocs(queryI);
querySnapshot.then(a => {
console.log("hello")
if(a.size > 0){
this.notfound = false;
a.forEach(i => {
const idat = i.data()
const images = idat.image
const urls = images.map((us : string) => game + "/" + us + ".jpeg");
this.allimages = urls;
const priority = urls.slice(0, Math.min(urls.length, 6));
console.log(priority);
const promises = priority.map((url: string) => getDownloadURL(ref(this.storage, url.replace(" ", ""))))
Promise.all(promises).then(x => {
console.log("all promise")
idat.image = x;
this.item = idat;
this.fetched = Array(idat.variants.length).fill(false);
let parsedvs = idat.variants.map((e: string) => JSON.parse(e));
if(parsedvs.length > 0){
parsedvs.unshift({"item_name": idat.item_name})
this.item.variants = parsedvs;
} else {
this.item.variants = parsedvs;
}
this.ilink = this.san(this.item.link);
console.log("qqq")
this.loaded = true;
});
})
}else{
this.loaded = true;
this.notfound = true;
}
})
})
}
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 19.2.5
Node: 18.20.0
Package Manager: npm 10.5.0
OS: darwin arm64
Angular: 19.2.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1902.5
@angular-devkit/build-angular 19.2.5
@angular-devkit/core 19.2.5
@angular-devkit/schematics 19.2.5
@angular/cdk 19.2.7
@angular/cli 19.2.5
@angular/fire 19.0.0
@angular/material 19.2.7
@angular/ssr 19.2.5
@schematics/angular 19.2.5
rxjs 7.8.2
typescript 5.8.2
zone.js 0.15.0
Anything else?
No response
Activity
alan-agius4 commentedon Jun 2, 2025
Thanks for reporting this issue. However, you didn't provide sufficient information for us to understand and reproduce the problem. Please check out our submission guidelines to understand why we can't act on issues that are lacking important information.
If the problem persists, please file a new issue and ensure you provide all of the required information when filling out the issue template.
angular-automatic-lock-bot commentedon Jul 3, 2025
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.