Angular 13应用在Cefsharp 57.0.0.0无法正常加载的兼容配置咨询

CefSharp 57 内置Chromium内核为Chrome 57（2017年正式发布），远低于Angular 13官方默认的浏览器兼容基线。页面卡在初始加载页、路由无响应且控制台无报错，本质是Chrome 57无法识别Angular 13默认构建输出的ES2020+高版本语法、缺失部分依赖的Web API，脚本执行静默中断，路由初始化逻辑未正常运行。

按以下步骤调整Angular项目配置即可实现兼容运行：

• 调整TypeScript编译目标，输出低版本兼容语法
  打开项目根目录tsconfig.json，修改compilerOptions下的target字段为es5，确保编译产物语法可被Chrome 57识别：

  {
    "compilerOptions": {
      "target": "es5",
      // 其余原有配置保持不变
    }
  }
  

  同时修改根目录browserslist配置，新增Chrome 57的支持声明，让构建工具自动匹配对应兼容补丁：

  > 0.5%
  last 2 versions
  Chrome >= 57
  

• 补全缺失的核心polyfill
  打开src/polyfills.ts，引入Chrome 57缺失的ES语法与Web API补丁：

  import 'core-js/es/symbol';
  import 'core-js/es/object';
  import 'core-js/es/function';
  import 'core-js/es/parse-int';
  import 'core-js/es/parse-float';
  import 'core-js/es/number';
  import 'core-js/es/math';
  import 'core-js/es/string';
  import 'core-js/es/date';
  import 'core-js/es/array';
  import 'core-js/es/regexp';
  import 'core-js/es/map';
  import 'core-js/es/set';
  import 'core-js/es/promise';
  import 'core-js/web/url';
  import 'core-js/web/dom-collections';
  import 'core-js/web/history';
  // zone.js 引入需放在所有polyfill最后
  import 'zone.js';
  

• 调整路由配置规避兼容问题
  打开根路由模块文件，修改路由根配置，关闭Angular 13新增的不兼容老内核的路由特性，若仍存在跳转问题可开启哈希路由模式：

  @NgModule({
    imports: [RouterModule.forRoot(routes, {
      preloadingStrategy: NoPreloading,
      relativeLinkResolution: 'legacy',
      initialNavigation: 'enabledBlocking',
      useHash: true // 路由仍异常时开启
    })],
    exports: [RouterModule]
  })
  

• 调整构建配置避免产物兼容问题
  打开angular.json，修改生产环境构建配置，关闭针对新版浏览器的优化项，关闭差分加载避免老内核加载错误版本的产物：

  {
    "configurations": {
      "production": {
        "buildOptimizer": false,
        "optimization": {
          "scripts": true,
          "styles": {
            "minify": true,
            "inlineCritical": false
          },
          "fonts": true
        },
        "differentialLoading": false
      }
    }
  }
  

注意：CefSharp 57版本迭代时间过早，即使完成以上配置，Angular 13部分第三方生态依赖仍可能存在兼容问题。长期维护场景下建议升级CefSharp至104及以上版本，对应Chromium内核可原生支持Angular 13所有特性，无需额外兼容配置。

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