Angular 14网页在智能电视端白屏问题求助

• 检查智能电视浏览器的ES版本支持
  智能电视的WebKit内核普遍偏旧，就算开了ES5兼容，可能还是有ES6+特性没被转译。试试修改tsconfig.json，把target设为es5，同时lib数组包含es2015、dom；或者用命令ng build --target=es2015 --build-optimizer=false构建。另外更新browserslist配置，加上webos、tizen、android 6这类智能电视常见的浏览器标识，让Angular自动适配转译。

• 补全缺失的Polyfill
  Angular默认的polyfill可能不够覆盖智能电视的缺失API，比如Promise、fetch、数组的includes方法这些。手动在src/polyfills.ts里引入core-js/es/promise、core-js/es/array/includes，再装依赖npm install core-js whatwg-fetch --save。

• 关闭生产构建的部分优化
  生产模式的Tree Shaking、代码压缩可能让旧浏览器解析失败。先试试用ng build --prod --build-optimizer=false --optimization=false构建，如果能正常显示，再逐步开启优化，找到具体出问题的项。

• 一定要看控制台错误
  智能电视大多支持远程调试：WebOS用WebOS Dev Manager连电视开Chrome DevTools；Tizen用Tizen Studio的Web Inspector；安卓电视通过ADB连，用Chrome的chrome://inspect看报错。白屏基本都是JS执行中断导致的，比如未定义变量、不支持的语法，找到报错就能针对性修复。

• 检查CSS兼容性
  智能电视对CSS新特性支持差，比如Grid布局、CSS变量这些。试试换成兼容性好的布局（比如float替代Grid），或者给属性加前缀，避免用太新的CSS语法。

• 减轻首屏加载压力
  智能电视性能有限，首屏加载太重会卡死。启用模块懒加载，拆分大模块；删掉不必要的第三方库，或者换成轻量的替代方案。

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