Angular SSR 应用启动时的一些保护措施

发布时间 2023-03-26 14:57:31作者: JerryWang_汪子熙

看下面这段代码:

在原始的 platformBrowserDynamic().bootstrapModule(AppModule) 调用之前,增添了一个 if 判断条件。

if (document.readyState === 'complete') {
  bootstrap();
} 

这行代码的含义是在 Angular 应用中检查当前文档是否已经完全加载,并在文档加载完成后执行 bootstrap 函数来启动 Angular 应用。

document.readyState 属性返回当前文档的加载状态,它有以下三个值:

  • loading:文档正在加载中;
  • interactive:文档已经完成了解析,但仍在加载子资源,例如图片和样式表等;
  • complete:文档和所有子资源已经完成加载。

因此,当 document.readyState 的值为 complete 时,表示文档和所有子资源已经加载完成,此时可以安全地启动 Angular 应用。

在 Angular 应用中,通常使用该代码片段来确保 Angular 应用在文档加载完成后启动。这样可以避免在文档未加载完全时就启动 Angular 应用,从而避免因为文档未加载完成而导致的各种问题。

在 Angular 应用的 main.ts 文件中,某些函数调用只有在 document.readyState 的值变成 complete 之后才执行,是为了确保在文档加载完全后才启动 Angular 应用。

当浏览器加载一个 HTML 页面时,它会按照文档的顺序逐步解析和渲染 HTML 标签和 CSS 样式等资源,如果在文档还未完全加载完成时就启动 Angular 应用,可能会导致应用出现意料之外的行为,例如页面样式错乱、资源加载失败、路由未正确初始化等问题。

为了避免这些问题,Angular 应用在启动之前通常会检查 document.readyState 的值是否为 complete,只有在文档加载完成后才会启动 Angular 应用,从而确保应用启动时文档已经完全加载完毕,保证应用正常运行。