Angular V18 PM [vite] Внутренняя ошибка сервера: страница /home не отображается в течение 30 секунд

В моем проекте 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 секунды.

Есть идеи, почему это происходит?

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
59
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, проблема в том, что при инициализации приложения оно никогда не становится стабильным. Итак, через 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);
    });
  }
}

Как объясняется в документации о запуске кода после того, как приложение становится нестабильным

Это устранило проблему. Большое спасибо

jamakr4 24.07.2024 23:50

Другие вопросы по теме