Angular 12升级至13后无法生成main-es2015文件求助

核心原因 #

Angular 13对差异加载机制做了简化：当你的tsconfig.json里target设为es2015或更高版本时，CLI默认只会输出一份ES2015标准的bundle，直接命名为main.js——不再额外生成带-es2015后缀的文件，因为此时输出的文件本身就符合ES2015规范。

具体处理方案 #

1. 先确认当前输出是否达标 #

直接查看dist目录下的main.js代码，要是里面有箭头函数、let/const这类ES2015特性，说明这就是你要的ES2015 bundle，不用纠结文件名，属于正常现象。

2. 若需要同时生成ES5和ES2015双版本bundle #

如果要兼容IE11这类旧浏览器，按以下步骤配置：

• 新增tsconfig-es5.app.json文件，内容如下：

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "target": "es5"
  }
}

• 修改angular.json的build配置，在configurations里添加es5项：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // 保留原有配置
  },
  "configurations": {
    "production": {
      // 保留原有生产配置
    },
    "es5": {
      "tsConfig": "./tsconfig-es5.app.json"
    }
  }
}

• 执行构建命令时同时指定生产环境和es5配置：

ng build --configuration production,es5

这时会生成main.js（ES2015）和main-es5.js（ES5）两份文件，index.html也会自动加入差异加载逻辑，让浏览器按需加载。

3. 检查browserlist配置 #

打开项目根目录的browserlist文件，确保里面包含需要兼容的旧浏览器（比如IE11），如果配置里只写了现代浏览器，CLI会跳过ES5 bundle的生成。示例配置：

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
IE 11

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