在Angular Universal中通过SetTimeout调用JS函数报错排查

代码示例 #

declare var loadMobileFuncs: any;

class Foo {
     // ...
     async ngOnInit(): Promise<void> {
          setTimeout(async () => {
                loadMobileFuncs();
          }, 10);
    }
}

loadMobileFuncs是外部JS文件中的前端函数，在Angular Universal环境下运行时控制台抛出ReferenceError: loadMobileFuncs is not defined，但移除Universal后无报错，且Universal环境下功能仍可正常工作。

报错原因 #

Angular Universal基于服务端渲染（SSR）机制，你的代码会在服务器端和客户端各执行一次：

1. 服务器端执行时，没有浏览器的全局环境，也不会加载客户端的外部JS文件，此时loadMobileFuncs变量完全不存在，因此抛出ReferenceError。
2. 客户端渲染完成后，外部JS文件已加载完毕，loadMobileFuncs存在，setTimeout的回调会正常执行，所以实际功能不受影响。
3. 报错信息里的loadMobileMenuFuncs属于笔误，实际指向的是loadMobileFuncs。

解决办法 #

1. 直接判断浏览器环境

通过检查window对象是否存在，仅在客户端调用该函数：

async ngOnInit(): Promise<void> {
  setTimeout(async () => {
    if (typeof window !== 'undefined') {
      loadMobileFuncs();
    }
  }, 10);
}

2. 使用Angular官方工具判断（更规范）

利用Angular提供的PLATFORM_ID和isPlatformBrowser工具函数，精准区分服务器/客户端环境：

import { Component, OnInit, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

class Foo {
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  async ngOnInit(): Promise<void> {
    setTimeout(async () => {
      if (isPlatformBrowser(this.platformId)) {
        loadMobileFuncs();
      }
    }, 10);
  }
}

3. 服务器端加载对应JS（可选）

如果loadMobileFuncs有服务器端兼容的实现，可以将该JS文件也引入服务器端执行环境，但这类DOM操作相关的函数通常不需要在服务器端运行，因此前两种方法更实用。

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