In my Angular project (v18) I am receiving the following error:
9:20:15 PM [vite] Internal server error: Page /home did not render in 30 seconds.
at Timeout.<anonymous> (/Users/jan/Projekts/PflanzenApp/node_modules/@angular/build/src/utils/server-rendering/render-page.js:90:90)
at Timeout.timer (/Users/jan/Projekts/PflanzenApp/node_modules/zone.js/fesm2015/zone-node.js:2198:37)
at _ZoneDelegate.invokeTask (/Users/jan/Projekts/PflanzenApp/node_modules/zone.js/fesm2015/zone-node.js:398:33)
at _ZoneImpl.runTask (/Users/jan/Projekts/PflanzenApp/node_modules/zone.js/fesm2015/zone-node.js:158:47)
at invokeTask (/Users/jan/Projekts/PflanzenApp/node_modules/zone.js/fesm2015/zone-node.js:479:34)
at Timeout.ZoneTask.invoke (/Users/jan/Projekts/PflanzenApp/node_modules/zone.js/fesm2015/zone-node.js:468:48)
at Timeout.data.args.<computed> (/Users/jan/Projekts/PflanzenApp/node_modules/zone.js/fesm2015/zone-node.js:2180:32)
at listOnTimeout (node:internal/timers:573:17)
at process.processTimers (node:internal/timers:514:7)
There is no logical reason why this happens because aside from the error message everything works perfectly fine and just as it should.
This seems to be the Error producing Code Snippet
import { Component, OnInit } from '@angular/core';
import { Location } from '@angular/common';
import { Router, RouterLink } from '@angular/router';
import { QuoteComponent } from '../quote/quote.component';
import { WeatherDisplayComponent } from '../weather-display/weather-display.component';
import { Plant } from '../classes/plants';
import { PlantService } from '../services/plant.service';
import { CommonModule } from '@angular/common';
import { NgIf } from '@angular/common';
@Component({
selector: 'app-home-page',
standalone: true,
imports: [QuoteComponent, RouterLink, WeatherDisplayComponent, CommonModule, NgIf],
templateUrl: './home-page.component.html',
styleUrl: './home-page.component.css'
})
export class HomePageComponent implements OnInit {
plants: Plant[] = [];
pinnedPlants: Plant[] = [];
days = 0;
hours = 0;
minutes = 0;
seconds = 0;
waterAmount = 0;
constructor(private plantService: PlantService) {
this.plants = plantService.getOwnedPlants();
}
ngOnInit(): void {
this.plants = this.plantService.getOwnedPlants();
this.pinnedPlants = this.plants.filter(plant => plant.pinned);
this.pinnedPlants.forEach(plant => this.updatePinnedPlant(plant));
setInterval(() => this.checkWatering(), 1000);
}
daysIntoYear(date: Date): number {
return (Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) - Date.UTC(date.getFullYear(), 0, 0)) / 24 / 60 / 60 / 1000;
}
updatePinnedPlant(plant: Plant): void {
const currentTime = new Date();
plant.waterTime = new Date(currentTime.getTime() + plant.timeBetweenSessions * 60 * 1000);
}
checkWatering(): void {
const currentTime = new Date();
this.pinnedPlants.forEach(plant => {
let timeTillWater = plant.waterTime.getTime() - currentTime.getTime();
this.days = Math.floor(timeTillWater / (24 * 60 * 60 * 1000));
this.hours = Math.floor((timeTillWater % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
this.minutes = Math.floor((timeTillWater % (60 * 60 * 1000)) / (60 * 1000));
this.seconds = Math.floor((timeTillWater % (60 * 1000)) / 1000);
let multiplier = 1;
switch (plant.maintenance) {
case 'Monthly':
multiplier = 30;
break;
case 'Weekly':
multiplier = 7;
break;
case 'Medium':
case 'Daily':
default:
multiplier = 1;
}
this.waterAmount = plant.water * multiplier;
if (timeTillWater <= 0) {
console.log("Gießen")
}
});
}
}
(Error appears in the home-Page.component.ts file : https://github.com/jamakr4/PflanzenApp)
I have never seen anything like this before and after doing some research I was not able to find anything like this.
The error appears in random intervals sometimes twice per Minute, sometimes every 2 seconds.
Any ideas why this happens?