Angular 12 SSR站点在IE及三星电视浏览器无法运行，兼容配置后仍失效如何解决

需补充的额外配置项 #

1. 补全polyfill垫片 #

你当前添加的core-js基础模块未覆盖旧浏览器全量兼容需求，先安装缺失的依赖：

npm install classlist.js web-animations-js --save

之后在polyfills.ts中追加以下导入：

// * zone.js 是Angular运行必备依赖，务必放在所有polyfill的最后导入
import 'zone.js/dist/zone';
// 补充IE及三星电视浏览器缺失的API
import 'core-js/es/promise';
import 'core-js/es/array/includes';
import 'core-js/es/array/find';
import 'core-js/es/array/find-index';
import 'classlist.js';
// 若使用了Angular动画模块，添加以下依赖
import 'web-animations-js';

2. 调整.browserslistrc兼容目标 #

Angular 12默认排除了IE11的兼容，找到项目根目录下的.browserslistrc文件，修改内容为：

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
IE 11
Tizen >= 4
not dead

该配置会告知打包工具针对性生成兼容目标环境的代码。

3. 修正tsconfig配置 #

除了将主tsconfig.json的target改为es5外，还要在compilerOptions中追加以下配置：

"downlevelIteration": true,
"lib": ["es2017", "dom"]

同时找到SSR对应的tsconfig.server.json，将其target也改为es5，避免服务端打包输出ES6+语法。

4. 调整angular.json构建参数 #

找到angular.json中projects -> 你的项目名 -> architect -> build -> options节点，追加/修改以下配置：

"aot": true,
"vendorChunk": true,
"commonChunk": true,
"allowedCommonJsDependencies": ["core-js", "classlist.js", "web-animations-js"]

5. SSR兼容处理 #

所有调用window、document等浏览器专属API的代码，必须通过isPlatformBrowser判断后再执行，避免服务端渲染输出的内容在旧浏览器加载时直接报错阻塞执行：

import { isPlatformBrowser } from '@angular/common';
import { PLATFORM_ID, Inject } from '@angular/core';

// 类构造函数中注入
constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

// 调用浏览器API前判断
if (isPlatformBrowser(this.platformId)) {
  // 执行浏览器端逻辑
}

注意：如果调整后三星电视浏览器仍加载失败，可在index.html的head标签内提前添加document['currentScript'] = document.currentScript || document.scripts[document.scripts.length - 1];解决旧版Chromium内核的currentScript兼容问题。

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