Angular 5本地IE正常，Docker部署至非生产环境后IE报错求助

嘿，针对你遇到的本地IE能正常运行Angular 5项目，但Docker部署到非生产环境后就出现SCRIPT1002: Syntax error和SCRIPT5007: The value of property is null or undefined的问题，我整理了几个关键排查点和修复方案：

1. 确认TypeScript编译与浏览器兼容配置 #

首先得确保代码是按IE支持的标准编译的：

• 打开tsconfig.json，检查compilerOptions.target是否设置为es5——这会让TypeScript把ES6+代码转译成IE能识别的ES5语法，直接解决大部分SCRIPT1002语法错误。
• 查看项目根目录的.browserslistrc（或package.json中的browserslist字段），一定要包含IE 11，示例配置：

  IE 11
  last 2 versions
  

  这个配置会告诉Angular构建工具专门针对IE做兼容处理。

2. 补全IE 11必需的Polyfills #

虽然你已经添加了常用polyfills，但Angular 5对IE 11还有几个必填项别漏了：

• 打开src/polyfills.ts，去掉以下代码的注释以启用：

  import 'core-js/es6/symbol';
  import 'core-js/es6/object';
  import 'core-js/es6/function';
  import 'core-js/es6/parse-int';
  import 'core-js/es6/parse-float';
  import 'core-js/es6/number';
  import 'core-js/es6/math';
  import 'core-js/es6/string';
  import 'core-js/es6/date';
  import 'core-js/es6/array';
  import 'core-js/es6/regexp';
  import 'core-js/es6/map';
  import 'core-js/es6/weak-map';
  import 'core-js/es6/set';
  // IE11专属额外polyfill
  import 'core-js/es7/array';
  import 'classlist.js';
  import 'web-animations-js';
  

• 安装对应的依赖包：

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

3. 检查Docker构建命令与产物路径 #

Docker部署时的构建方式很容易踩坑：

• 别用默认的ng build（开发模式构建未做完整转译），哪怕是非生产环境，也建议用生产模式构建：

  ng build --prod --base-href /你的应用部署路径/
  

  这里的--base-href必须匹配实际部署路径，否则polyfill等静态资源会加载失败，这是SCRIPT5007错误的常见诱因。
• 进入Docker容器检查dist目录产物：
  • 确认polyfills.bundle.js存在（Angular 5打包产物中应有此文件）。
  • 打开index.html，检查polyfill脚本的引用路径是否正确，避免出现404。

4. 修复Zone.js的IE兼容问题 #

Angular依赖的Zone.js在IE 11下需要特定补丁：

• 在polyfills.ts中添加Zone.js的IE补丁：

  import 'zone.js/dist/zone';
  import 'zone.js/dist/zone-patch-ie';
  

• 尽量使用Angular CLI默认安装的Zone.js版本，避免随意升级导致版本不兼容。

5. 排查第三方依赖的转译问题 #

如果项目使用了第三方库，部分库可能未转译为ES5，也会导致IE报错：

• 打开.angular-cli.json（Angular 5配置文件），在build.options中设置vendorChunk: true，确保第三方依赖被单独打包并转译。
• 若某个库仍未被转译，可在tsconfig.json的compilerOptions.include中添加其路径，或使用@angular-builders/custom-webpack配置额外转译规则。

按这些步骤逐一排查，应该能解决你遇到的IE报错问题。

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