Angular 5部署至服务器后IE 11兼容性报错求助

Hey there, let's break down each of those errors you're hitting after deploying your Angular app to the server—these issues almost always stem from differences between your local dev environment and production builds, or browser compatibility gaps. Here's how to tackle each one:

Error 1: Chart.min.js - Can't access 'onHover' property of undefined/null reference #

This usually ties to Chart.js compatibility or missing configuration in your chart setup:

• Double-check that your Chart.js version is fully compatible with any Angular chart wrapper you're using (like ng2-charts). Mismatched versions often cause missing properties like onHover.
• Verify your chart configuration object—make sure the onHover property is set to a valid function, not undefined or omitted entirely. If you don't need custom hover behavior, you can either remove it explicitly or set it to an empty function.
• If you're using a production build, ensure Chart.js isn't being stripped out by tree shaking. You can either add it to the scripts array in your angular.json (under build.options) or import it directly in your component files instead of relying on a global script.

Error 2: polyfills.bundle.js - SCRIPT 1028 Expected identifier, string or number #

This is a classic syntax error for older browsers (looking at you, IE) where modern JS features aren't being transpiled properly:

• Open up polyfills.ts in your project root and make sure you've uncommented all necessary polyfills for your target browsers. At minimum, you'll need core-js/es6 and core-js/es7 to cover arrow functions, let/const, and other ES6+ features. For IE support, don't forget classlist.js and web-animations-js.
• Check your tsconfig.json and set the target property to ES5 if you need to support older browsers. ES6+ syntax will throw this error in environments that don't understand it.
• Confirm your production build is using proper transpilation. If you're using Angular CLI, the default build should handle this, but if you've customized your webpack config, make sure Babel is set up to transpile all vendor and app code.

Error 3: styles.bundle.js - Object doesn't support property or method 'querySelector' #

This is almost always a browser compatibility issue or a timing problem with DOM access:

• querySelector isn't supported in IE8 and below. If your app needs to work with those ancient browsers, you'll need to add a polyfill for document.querySelector and element.querySelector. Alternatively, push users to upgrade to a modern browser.
• Check if the code calling querySelector is running before the DOM element it's targeting exists. In Angular, make sure you're accessing DOM elements inside ngAfterViewInit (not ngOnInit) to ensure the element is rendered.
• Double-check any custom CSS-related scripts you've added to your styles bundle—sometimes third-party CSS libraries include small JS snippets that use querySelector without checking for browser support.

Error 4: vendor.bundle.js (truncated error) #

Even though the error is cut off, common issues with vendor bundles in deployed Angular apps include:

• Mismatched dependency versions: Run npm ls to check for conflicting versions of packages in your node_modules. If you find any, use npm dedupe or adjust your package.json to lock in compatible versions.
• Corrupted build artifacts: Delete your dist folder and node_modules, then run npm install followed by a fresh production build (ng build --prod). This fixes issues where cached build files cause unexpected errors.
• Overly aggressive optimization: If you've tweaked Angular's build optimization settings, try disabling them temporarily to see if the error goes away. You can adjust optimization, buildOptimizer, and aot flags in angular.json under configurations.production.

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