В моем проекте Angular (v18) я получаю следующую ошибку:
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)
Нет никакой логической причины, почему это происходит, потому что, если не считать сообщения об ошибке, все работает отлично и так, как должно.
Кажется, это ошибка при создании фрагмента кода.
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.info("Gießen")
}
});
}
}
В файле home-page.component.ts
появляется ошибка
(https://github.com/jamakr4/PflanzenApp)
Я никогда раньше не видел ничего подобного, и после некоторых исследований мне не удалось найти ничего подобного.
Ошибка появляется через случайные промежутки времени иногда два раза в минуту, иногда каждые 2 секунды.
Есть идеи, почему это происходит?
Я думаю, проблема в том, что при инициализации приложения оно никогда не становится стабильным. Итак, через 30 секунд Angular перестает ждать стабильности.
Когда приложение Angular загружается, оно должно быть стабильным, чтобы считаться загрузившимся. Стабильный означает, что не осталось задач для выполнения. Из-за setInterval
всегда будет ожидающая задача, поэтому она никогда не будет стабильной и никогда не будет считаться загруженной, отсюда и ошибка.
Это связано с тем, что Zone.js исправляет API-интерфейсы, такие как
setInterval
, поэтому он знает, когда есть ожидающие задачи.
Чтобы запустить setInterval
, который делает приложение постоянно нестабильным, вы можете сделать это после того, как приложение станет стабильным или завершится процесс начальной загрузки:
@Component({
//...
)
export class HomePageComponent implements OnInit {
constructor(
private plantService: PlantService,
private applicationRef: ApplicationRef,
) {
// ...
}
ngOnInit(): void {
// ...
this.applicationRef.isStable.pipe(first((isStable) => isStable)).subscribe(() => {
setInterval(() => this.checkWatering(), 1000);
});
}
}
Как объясняется в документации о запуске кода после того, как приложение становится нестабильным
Это устранило проблему. Большое спасибо