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

Posted 2023-03-26 JerryWangSAP

看下面这段代码：

在原始的 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 应用，从而确保应用启动时文档已经完全加载完毕，保证应用正常运行。