Angular 应用错误日志：1 rules skipped due to selector errors

在 Angular 项目中启用服务器端渲染（SSR）后，出现了日志信息 1 rules skipped due to selector errors。这条日志提示在处理 CSS 选择器时发生了错误，导致某些 CSS 规则被跳过。为深入理解此问题，需从以下几个方面进行分析：

1. 日志信息的含义

日志信息 1 rules skipped due to selector errors 表示在解析 CSS 时，某些选择器存在错误，导致相应的 CSS 规则未被应用。具体而言，可能是由于选择器语法不正确或包含了无法解析的伪类或伪元素。

2. 可能的原因

• CSS 选择器语法错误：选择器中可能存在语法错误，如多余的符号或不正确的组合。

• 不支持的伪类或伪元素：某些伪类或伪元素在特定环境下（如 SSR）可能不被支持，导致解析失败。

• 第三方库的兼容性问题：引入的第三方库（如 Bootstrap）可能包含复杂的选择器，这些选择器在 SSR 环境下解析时出现问题。

3. 具体案例分析

在使用 Bootstrap 的 Angular 项目中，开发者报告在构建生产环境时出现以下警告：

1 rules skipped due to selector errors: legend+* -> Cannot read property 'type' of undefined

此警告指出选择器 legend+* 存在问题，导致相应的 CSS 规则被跳过。该问题可能源于 Bootstrap 的某些选择器在 Angular 的 SSR 环境下解析时出现错误。

4. 解决方案

• 更新相关依赖：确保 Angular、Bootstrap 以及相关库均为最新版本。某些已知问题在新版本中可能已被修复。

• 禁用关键 CSS 内联：在 SSR 环境下，关键 CSS 内联可能导致解析问题。可在服务器配置中禁用此功能：

  app.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
    inlineCriticalCss: false,
  }));
  

  通过设置 inlineCriticalCss 为 false，可以避免在 SSR 环境下内联关键 CSS，从而绕过解析错误。

• 手动调整 CSS：如果问题持续，可考虑手动修改存在问题的 CSS 选择器，避免使用在 SSR 环境下解析有问题的选择器。

5. 参考资料

• Angular CLI Issue #22958

• ng-bootstrap Issue #4306

• Angular Universal Issue #2811

6. 总结

在 Angular 项目中启用 SSR 后，出现 1 rules skipped due to selector errors 的日志信息，通常是由于 CSS 选择器在服务器端解析时出现问题。通过更新相关依赖、禁用关键 CSS 内联或手动调整 CSS 选择器，可以有效解决此问题。