Closed as not planned
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
{
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;
}
})
})
}">
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
Metadata
Metadata
Assignees
Labels
No labels