Angular 5与SharePoint SPFX兼容IE：如何正确引入Polyfills？

Hey there, let's work through this IE rendering problem—you're not alone with this combination of tech! Angular 5 and SPFX do support IE11 (the last supported IE version), but it takes precise configuration to get everything playing nice. Let's go through the key steps you might have missed:

1. Verify SPFX Project Targets for IE11 #

First, make sure your SPFX project is explicitly set up to support IE11. Open config/config.json and check the targets section—if it doesn't have an ie11 entry, add it:

"targets": {
  "default": {
    "lib": ["es2015"],
    "excludeLib": ["es2016", "es2017"],
    "includePolyfills": true
  },
  "ie11": {
    "lib": ["es5", "es2015.promise", "es2015.collection", "es2015.iterable"],
    "includePolyfills": true
  }
}

This tells SPFX's build system to compile code compatible with IE11 and include necessary polyfills.

2. Fully Configure Angular's Polyfills.ts #

Your polyfills file needs to cover all the gaps IE11 has for Angular 5. First, install required packages:

npm install --save classlist.js web-animations-js core-js@2

(Note: Angular 5 relies on core-js v2—don't install v3, this is a common gotcha!)

Then update src/polyfills.ts with all these imports:

// IE9, IE10 and IE11 requires all of the following polyfills
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';

// IE10/11 support for NgClass on SVG elements
import 'classlist.js';

// IE10/11 support for Reflect API (required by Angular)
import 'core-js/es6/reflect';

// Evergreen browsers need this for Reflect API in JIT
import 'core-js/es7/reflect';

// Web Animations support (if using Angular animations)
import 'web-animations-js';

// Zone.js (required for Angular change detection)
import 'zone.js/dist/zone';

Don't skip any of these—IE11 lacks most modern JS features that Angular depends on.

3. Check TypeScript Compiler Target #

Ensure your tsconfig.json is set to compile to ES5 for IE compatibility:

"compilerOptions": {
  "target": "es5",
  "module": "esnext",
  "lib": ["es2015", "dom"],
  // ... other options
}

This ensures TypeScript transpiles modern syntax (like arrow functions, let/const) to IE-friendly ES5.

4. Fix Your Externals Configuration #

You mentioned adding polyfills to externals—this is likely causing issues. Remove any polyfill-related entries from config/config.json's externals section. SPFX's build system should bundle polyfills directly into your web part instead of loading them externally.

5. Test with the IE11 Build Target #

When testing, use the SPFX build command targeted specifically for IE11 to ensure you're seeing the correct compiled code:

gulp serve --target ie11

This launches a version of your web part optimized for IE11.

6. Diagnose with IE's Developer Tools #

Open IE's F12 Developer Tools and check the Console tab for specific errors—this is the fastest way to pinpoint missing polyfills or syntax issues. For example:

• Symbol is not defined means you missed the core-js/es6/symbol polyfill
• ClassList is not supported means classlist.js isn't installed/imported correctly

7. Enable Angular AOT Compilation #

Just-In-Time (JIT) compilation can cause issues in IE11. Enable Ahead-of-Time (AOT) compilation for your Angular app in SPFX:
If you're using an Angular CLI setup within your SPFX project, update angular.json to set:

"projects": {
  "your-angular-app": {
    "architect": {
      "build": {
        "options": {
          "aot": true
        }
      }
    }
  }
}

AOT compiles your Angular templates and code ahead of time, resulting in IE-friendly code.

8. Disable IE Compatibility View #

Make sure the SharePoint site isn't added to IE's Compatibility View. This forces IE to use an older, unsupported rendering mode (like IE9) which will break Angular 5. To check:

• Open IE > Settings > Compatibility View Settings
• Ensure your SharePoint site isn't listed

Hope these steps resolve your IE rendering issues! If you hit a specific error message, drop it here and we can troubleshoot further.

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