Angular中polyfills.ts条件导入core-js报错，如何实现条件导入？

你遇到的语法错误是因为ES模块的import声明是静态语法，必须放在模块的顶层作用域，不能嵌套在if这类条件语句里——JavaScript引擎在编译阶段就会解析所有顶层import，没法在运行时动态决定是否导入。

不过有几种可行的方式实现条件导入，下面给你详细说明：

方案1：使用动态import()（推荐，适合现代打包工具） #

ES2020引入了动态import()语法，它返回一个Promise，可以放在任何逻辑块里执行。修改你的代码如下：

const version = detectIE();
if (version && version < 12) {
  // 动态导入polyfill，加载完成后再执行依赖代码
  import('core-js/es6/symbol').then(() => {
    // 这里可以初始化你的应用，或者执行依赖Symbol的代码
    console.log('IE11 polyfill loaded');
  });
}

注意事项： #

• 如果使用TypeScript，需要确保tsconfig.json里的target设置为ES2020或更高，或者开启对应兼容配置；
• 打包工具（如Webpack、Vite）会自动把这个polyfill打包成单独的代码块，只有IE11及以下浏览器才会加载它，不会影响现代浏览器的打包体积。

方案2：通过HTML条件注释加载独立脚本 #

这是更传统的方式，直接在HTML里用IE专属的条件注释，只在IE11及以下加载polyfill文件：

<!--[if lte IE 11]>
  <!-- 可以加载完整core-js包，或单独的symbol模块 -->
  <script src="node_modules/core-js/es/symbol.js"></script>
<![endif]-->

优势： #

• 完全不需要修改polyfills.ts的代码；
• 逻辑简单，IE浏览器会自动识别条件注释并加载脚本，现代浏览器会直接忽略这段代码。

方案3：用Babel自动注入Polyfills（自动化程度最高） #

如果你的项目用了Babel，可以通过@babel/preset-env配置，让它根据目标浏览器自动注入需要的polyfills，不需要手动写任何导入逻辑：

1. 安装依赖：

npm install @babel/preset-env core-js@3 --save-dev

2. 修改babel.config.json（或.babelrc）：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": "11"
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

效果： #

Babel会自动分析你的代码中用到的ES6+特性，只在目标浏览器（这里是IE11）需要的时候，注入对应的polyfills——包括Symbol，完全不需要手动管理导入语句。

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