Angular 2/4在IE11中出现严格模式属性重复定义错误求助

Hey there, I’ve dealt with this exact IE11 + Angular 2/4 issue before—super frustrating, but there are a few solid fixes to try. Let’s walk through them:

• Double-check your own code for duplicate properties
  IE11 is way pickier about object literal duplicates than modern browsers, even when strict mode is enabled. Scan your components, services, and custom objects for accidental repeats like this:

  const userData = {
    username: 'john_doe',
    username: 'johndoe123' // This will trigger the error in IE11 strict mode
  };
  

  Even if this works fine in Chrome or Firefox, IE11 will throw that strict mode error every time.

• Make sure your polyfills are fully set up for IE11
  Angular 2/4 needs specific polyfills to play nice with IE11. Head to your polyfills.ts file and ensure these entries are uncommented (and install missing packages if needed):

  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';
  import 'classlist.js'; // Run `npm install classlist.js --save` if this is missing
  // Uncomment the line below if you're using Angular animations
  // import 'web-animations-js';
  

  Missing polyfills can cause unexpected strict mode errors, so don’t skip this step.

• Hunt down problematic third-party libraries
  Sometimes the duplicate property is hiding in an older npm package that gets bundled into main.bundle.js. To track it down:

  1. Open main.bundle.js in a text editor and search for repeated property names.
  2. Use source maps to trace the duplicate back to its original library file.
  3. Try updating the library to the latest version—many maintainers fix these IE11-specific issues in newer releases. If updating isn’t an option, look for an alternative library that supports IE11 properly.

• Tweak your TypeScript compiler settings
  Ensure your tsconfig.json is configured to target ES5 (which IE11 understands) and includes the right libraries:

  {
    "compilerOptions": {
      "target": "es5",
      "lib": ["es2015", "dom"],
      "strict": true,
      // Keep your other existing settings here
    }
  }
  

  Setting "target": "es5" ensures TypeScript transpiles your code to a version IE11 can handle, while the lib array adds necessary type definitions for older browsers.

• Disable strict mode temporarily (last resort only!)
  If you need a quick fix to unblock testing, you can remove "use strict"; from the top of main.bundle.js. But don’t make this a permanent solution—strict mode catches important bugs and removing it will hide other potential issues. Use this only while you track down the root cause of the duplicate property.

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