迁移到角度 18 后超时

Question

自从升级到 angular18 以来，我的简单组件超时了

[vite] Internal server error: Page /guide did not render in 30 seconds.
      at Timeout.<anonymous> (C:\Users\mbagi\Developer\xxx\angular-client\node_modules\@angular\build\src\utils\server-rendering\render-page.js:90:90)
      at Timeout.timer (c:/Users/mbagi/Developer/xxx/angular-client/node_modules/zone.js/fesm2015/zone-node.js:2320:21)
      at _ZoneDelegate.invokeTask (c:/Users/mbagi/Developer/xxx/angular-client/node_modules/zone.js/fesm2015/zone-node.js:459:13)
      at _ZoneImpl.runTask (c:/Users/mbagi/Developer/xxx/angular-client/node_modules/zone.js/fesm2015/zone-node.js:226:35)
      at invokeTask (c:/Users/mbagi/Developer/xxx/angular-client/node_modules/zone.js/fesm2015/zone-node.js:540:14)
      at Timeout.ZoneTask.invoke (c:/Users/mbagi/Developer/xxx/angular-client/node_modules/zone.js/fesm2015/zone-node.js:524:33)
      at Timeout.data.args.<computed> (c:/Users/mbagi/Developer/xxx/angular-client/node_modules/zone.js/fesm2015/zone-node.js:2301:23)
      at listOnTimeout (node:internal/timers:573:17)
      at process.processTimers (node: internal/timers:514:7

该组件用于每秒渲染一次图像，它将图像列表作为参数

import { Component, OnInit, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    @if(img(); as img){
      <img [src]="img" />
    }
  `,
  styles: '',
})
export class AppComponent implements OnInit {
  imgs = ['https://cdn.pixabay.com/photo/2023/09/02/03/15/water-8228076_1280.jpg',
  'https://media.istockphoto.com/id/157482223/de/foto/water-splash.jpg?s=2048x2048&w=is&k=20&c=tovlRmZEzpSmlXEL9OH8iANIK2w16YQD8QDDtsmxs3U=',
  'https://media.istockphoto.com/id/157482222/de/foto/gefrorene-tropfen-wasser.jpg?s=2048x2048&w=is&k=20&c=ASd2SEWIz7EEiSQLeCdrf6zA-eR9ExAyFCzZLG1tXco='];

  img = signal('');
  intervalId:any;
  pointer=0;

  ngOnInit(): void {
    this.img.set(this.imgs[0]);
    this.startImageRotation();
  }

  startImageRotation(): void {
    this.intervalId = setInterval(() => {
      this.pointer = (this.pointer + 1) % this.imgs.length;
      this.img.set(this.imgs[this.pointer]);
    }, 1000);
  }
}

如果我加载另一个页面并导航到此页面，则代码正在工作，如果我尝试直接刷新页面，则会出现超时。但是，如果我尝试运行 ng build，它总是会失败。此页面不允许我构建该项目

如何使用 ANGULAR 18 通过几个步骤重现该问题：

ng new test

更新app.compenent.ts

import { Component, OnInit, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    @if(img(); as img){
      <img [src]="img" />
    }
  `,
  styles: '',
})
export class AppComponent implements OnInit {
  imgs = `['https://cdn.pixabay.com/photo/2023/09/02/03/15/water-8228076_1280.jpg',
  'https://media.istockphoto.com/id/157482223/de/foto/water-splash.jpg?s=2048x2048&w=is&k=20&c=tovlRmZEzpSmlXEL9OH8iANIK2w16YQD8QDDtsmxs3U=',
  'https://media.istockphoto.com/id/157482222/de/foto/gefrorene-tropfen-wasser.jpg?s=2048x2048&w=is&k=20&c=ASd2SEWIz7EEiSQLeCdrf6zA-eR9ExAyFCzZLG1tXco=']`;

  img = signal('');
  intervalId:any;
  pointer=0;

  ngOnInit(): void {
    this.img.set(this.imgs[0]);
    this.startImageRotation();
  }

  startImageRotation(): void {
    this.intervalId = setInterval(() => {
      this.pointer = (this.pointer + 1) % this.imgs.length;
      this.img.set(this.imgs[this.pointer]);
    }, 1000);
  }
}

然后上菜

ng serve

你应该有这样的错误

Answer 1

看起来您正在使用 ssr 或预渲染。由于等待间隔，您的应用程序仍然不稳定。