Angular 4应用在IE11中无法运行的问题求助

Hey there, let's tackle those IE11 errors you're seeing step by step—they're all common pitfalls when getting Angular apps to play nice with older browsers like IE11.

1. Resolve the Conflicting Routing Strategy (Root Cause of Chunk Loading Failure) #

First off, I notice a critical mismatch in your routing setup:

• In app.routes.ts, you've set useHash: true (enables hash-based routing like /#/convention)
• But in app.module.ts, you're providing PathLocationStrategy (which is for HTML5 pushState routing, no hash in URLs)

These two settings are mutually exclusive, and this conflict is almost certainly causing the "Loading chunk common failed" error in IE11. Fix it by aligning the two:

Option 1: Stick with Hash-Based Routing (Recommended for IE11) #

Update the LocationStrategy provider in app.module.ts to use HashLocationStrategy:

providers: [
  { provide: LocationStrategy, useClass: HashLocationStrategy }
],

Option 2: Use HTML5 Routing (Requires Server Configuration) #

If you prefer no-hash URLs, remove useHash: true from your router config, but you'll need to configure your server to rewrite all requests to index.html (otherwise IE11 will fail to load chunks when navigating directly to routes).

2. Fix SCRIPT1003: ':' Expected (ES6+ Syntax Not Transpiled) #

This error means your common.chunk.js contains ES6+ syntax that IE11 can't parse. Let's ensure all code gets transpiled to ES5 and add missing polyfills:

Step 1: Verify TypeScript Target #

Check your tsconfig.json and make sure the target is set to ES5:

{
  "compilerOptions": {
    "target": "es5",
    // ... other options
  }
}

Step 2: Update Polyfills for IE11 #

Your current polyfills.ts is missing some critical polyfills required for IE11. Replace it with this expanded version (you'll need to run npm install classlist.js --save first):

// 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/set';
import 'core-js/es6/reflect';

// IE10 and IE11 requires this for NgClass support on SVG elements
import 'classlist.js';

// IE10 and IE11 requires this for the Reflect API
import 'core-js/es7/reflect';

// Zone JS is required by Angular itself
import 'zone.js/dist/zone';
// IE-specific Zone.js patch
import 'zone.js/dist/zone-polyfill';

Step 3: Ensure Third-Party Dependencies Are Transpiled #

If you're using any third-party libraries that aren't pre-transpiled to ES5, add them to the include array in tsconfig.json or use Angular CLI's scripts array to include them as global scripts.

3. Fix SCRIPT5022: SecurityError #

This error typically stems from IE11's strict security policies or cached outdated files:

• Clear IE11 Cache: IE11 holds onto cached files aggressively. Press Ctrl+Shift+Delete, select "Temporary Internet Files and Website Files", and clear them.
• Verify Zone.js Version: Ensure you're using a Zone.js version compatible with Angular 4 (v0.8.x is recommended—avoid newer versions that might break IE11 support).
• Check Base Href: Confirm your <base href="/"> in index.html is correct. If you're deploying to a subdirectory, update it to match (e.g., <base href="/my-app/">).

Final Checks #

After making these changes:

1. Rebuild your app with ng build --prod (or ng build for dev)
2. Test in IE11 again—all three errors should be resolved.

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