能否在Angular启动前执行vanilla JavaScript检测浏览器支持性？

该需求完全可以实现，你可以在Angular应用资源加载前执行轻量的特性检测逻辑，识别到不兼容的浏览器时直接跳转到静态引导页，不需要依赖任何polyfill，具体实现方案如下：

• 首先在项目根目录的index.html文件的<head>标签中插入内联检测脚本，注意要把这段脚本放在所有Angular相关的脚本、样式加载标签之前，避免不兼容浏览器加载冗余资源：

// 检测当前浏览器是否满足Angular运行的最低要求
function isAngularSupported() {
  // 检测ES6核心基础特性
  if (typeof Promise === 'undefined' || typeof Proxy === 'undefined' || typeof Symbol === 'undefined') return false;
  // 检测ES模块加载支持
  if (!('noModule' in HTMLScriptElement.prototype)) return false;
  // 可根据你使用的Angular版本添加对应特性检测，比如Angular 16+需支持Array.prototype.at
  if (typeof Array.prototype.at === 'undefined') return false;
  return true;
}

if (!isAngularSupported()) {
  // 直接重定向到静态浏览器引导页
  window.location.replace('/legacy-browser.html');
}

• 然后单独编写纯静态的引导页面legacy-browser.html，页面内容仅用基础HTML/CSS实现，不需要任何JS逻辑，清晰告知用户浏览器版本过低的问题，同时给出推荐的现代浏览器列表即可，保证老旧浏览器也能正常渲染页面，用户体验不会断层。

注意事项 #

• 优先用特性检测而非UA检测：特性检测的准确性更高，不会被用户篡改UA的场景影响，你可以根据自己使用的Angular版本调整检测的特性列表，比如Angular 14以下版本不需要ProxyAPI支持，可以去掉对应的检测项。
• 跳转使用window.location.replace()而非修改href属性，该方法会替换当前会话的历史记录，避免用户点击回退按钮时重新进入Angular入口页导致循环跳转。
• 检测逻辑不要依赖任何外部资源，全部以内联脚本的形式写在index.html中，避免外部资源加载失败导致检测逻辑失效。

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