Angular4（angular-cli）中$未定义，Edge/IE10报错Chrome/Firefox正常如何解决？

咱们先把核心问题掰扯清楚：Chrome和Firefox能正常识别$（也就是jQuery），但Edge和IE10找不到它，结合你给出的配置来看，大概率是jQuery的加载时机不对或者全局变量在IE环境里没正常注册，下面给你整理几个实测有效的解决方案：

方案1：把jQuery的加载顺序提前 #

IE和Edge对脚本加载的优先级处理和Chrome/Firefox有差异，哪怕你在index.html里引入了jQuery，也得确保它在Angular代码之前完全加载完成：

• 把jQuery的<script>标签放在es6-shim.js和es5-shim.js之后，所有Angular相关脚本（比如polyfills.js、main.js）之前
• 别给jQuery的脚本加async或defer属性，让它同步加载，确保Angular启动前$已经存在

示例（index.html里的脚本顺序）：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="https://cdn.bootcss.com/es6-shim/0.35.3/es6-shim.js"></script>
<script src="https://cdn.bootcss.com/es5-shim/4.5.10/es5-shim.js"></script>
<!-- 先加载jQuery -->
<script src="你的jQuery CDN地址或本地路径"></script>
<!-- 再加载Angular相关脚本 -->
<script src="polyfills.js"></script>
<script src="vendor.js"></script>
<script src="main.js"></script>

方案2：给TypeScript配置全局变量识别 #

有时候不是jQuery没加载，是TypeScript编译时没把$识别为全局变量，导致最终代码在IE里运行时出问题。你可以在tsconfig.app.json的compilerOptions里添加配置：

"compilerOptions": {
  // 你的原有配置...
  "types": ["jquery"],
  "allowJs": true
}

如果是用npm装的jQuery，记得先执行这条命令补全类型定义：

npm install jquery @types/jquery --save

这样TypeScript就能正确识别$，编译后的代码在IE里也能正常找到全局变量。

方案3：补全IE10需要的polyfill #

虽然你加了es5/es6 shim，但Angular4对IE10的支持还需要额外的polyfill。打开src/polyfills.ts，确保以下内容没被注释掉：

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'; // 需要先执行 npm install --save classlist.js
import 'web-animations-js'; // 需要先执行 npm install --save web-animations-js

这些polyfill能补全IE10缺失的ES6特性，避免因为环境差异导致jQuery的全局注册失败。

方案4：手动把jQuery挂载到全局（兜底方案） #

如果上面的方案都没解决问题，可以在需要使用$的组件或服务里，手动把jQuery挂载到window对象上：

import * as $ from 'jquery';
(window as any).$ = $;
(window as any).jQuery = $;

这样强制把$注册为全局变量，IE和Edge肯定能找到它。

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