Angular应用IE11中API调用失败，下拉框无法填充求助

Hey there, let's tackle this IE11 issue you're facing! The error 'Headers' is undefined is the key clue here—IE11 doesn't support modern browser APIs like the Headers object that Angular's HttpClient relies on for API calls. Plus, that dev mode notice is just a heads-up, but we can address that too.

Step 1: Add Required Polyfills #

IE11 needs polyfills to mimic modern JavaScript features it lacks. Here's what to do:

1. Install the necessary packages via npm:

   npm install core-js@3 whatwg-fetch --save
   

2. Open your src/polyfills.ts file and add these imports to cover missing APIs:

   // Core JS polyfills for ES6+ features IE11 doesn't support
   import 'core-js/es/reflect';
   import 'core-js/es/array';
   import 'core-js/es/object';
   import 'core-js/es/promise';
   import 'core-js/es/map';
   import 'core-js/es/set';
   
   // Polyfill for Fetch API (which includes the Headers object)
   import 'whatwg-fetch';
   
   // Keep the existing Zone.js import (should already be present in your file)
   import 'zone.js/dist/zone'; // Included with Angular CLI
   

Step 2: Ensure TypeScript Targets ES5 #

IE11 only understands ES5 code, so double-check your tsconfig.json:

{
  "compilerOptions": {
    "target": "es5", // Make sure this is explicitly set to es5
    // ... other existing configuration options
  }
}

Step 3: Disable Dev Mode (Optional) #

To get rid of that "Angular is in development mode" notice, update your src/main.ts to enable production mode when building for production:

import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

Just ensure your environment.production flag is set to true in your production environment config file.

Final Checks #

• Clear IE11's browser cache completely—old cached files can sometimes cause unexpected issues even after applying fixes.
• If you run into other "undefined" errors later, check the IE console for the specific missing feature and add the corresponding core-js polyfill (you can find the correct import path in core-js's documentation).

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