Angular中Interval函数引发UI无限加载，需手动输入/index.html

一、根路径加载异常（需手动访问/index.html） #

这是Angular单页应用的路由 fallback 配置问题，ng serve 默认会自动处理，但可从以下几点排查修复：

• 检查 angular.json 中 projects.[你的项目名].architect.build.options.baseHref，确保值为 "/"（默认配置），若曾修改过可能导致路径解析异常。
• 若使用路由（即使是独立组件），确保根路由配置了 fallback 规则，比如在根组件的路由提供者中添加：

  provideRouter([
    { path: '', component: ClockComponent },
    { path: '**', redirectTo: '' }
  ])
  

• 强制刷新浏览器缓存（Ctrl+Shift+R），旧缓存的路由规则可能导致加载异常。

二、热重载后多个定时器运行 #

你的 ngOnDestroy 逻辑本身无错，但热重载时组件销毁可能存在延迟，可通过以下优化彻底解决：

1. 显式重置timer变量：清除定时器后将timer设为null，避免残留引用：

   ngOnDestroy(): void {
     if (this.timer) {
       clearInterval(this.timer);
       this.timer = null; // 新增该行
     }
   }
   

2. 改用RxJS管理数据流：RxJS的interval配合takeUntil能更可靠地在组件销毁时停止任务，避免内存泄漏：

   import { interval, Subject } from 'rxjs';
   import { takeUntil } from 'rxjs/operators';
   
   export class ClockComponent implements OnInit, OnDestroy {
     secondsPassed = 0;
     private destroy$ = new Subject<void>();
   
     ngOnInit(): void {
       interval(1000)
         .pipe(takeUntil(this.destroy$))
         .subscribe(() => {
           this.secondsPassed++;
           console.log(this.secondsPassed);
         });
     }
   
     ngOnDestroy(): void {
       this.destroy$.next();
       this.destroy$.complete();
     }
   }
   

3. 检查独立组件引用：确保ClockComponent仅在根组件或目标路由中被引用一次，避免热重载时重复实例化。

如果想用async管道优化，可调整为以下写法，完全无需手动管理订阅：

// clock.component.ts
import { interval, map, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export class ClockComponent implements OnInit, OnDestroy {
  time$: Observable<number>;
  private destroy$ = new Subject<void>();

  ngOnInit(): void {
    this.time$ = interval(1000)
      .pipe(
        takeUntil(this.destroy$),
        map(count => count + 1)
      );
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

<!-- clock.component.html -->
<div class="time" id="time">{{ time$ | async }}</div>

内容的提问来源于stack exchange，提问作者blueberrybun