Angular Web Component与jQuery共存时报$未定义的TypeError问题求助

各位大佬好，我最近碰到个头疼的问题：我正在开发一个Angular Web Component，用来优化一个基于JEE的老项目组件，但只要把它和项目里的jQuery代码一起加载，就会报错。

我已经做了个最小化的测试用例来复现问题，HTML代码如下：

<html>
<head>
<script src="./jquery.min.js"></script>
<script src="./main.js"></script>
</head>
<body>
<app-test></app-test>
<button id="testBtn">Click</button>
<script>
$("#testBtn").click(function () {
 alert("jQuery fonctionne !");
});
</script>
</body>
</html>

我分别做了单独测试：

• 只要注释掉main.js的引入，jQuery的点击事件就能正常弹出提示
• 要是注释掉那段绑定点击事件的jQuery代码，我的Angular Web Component也能正常渲染工作

可只要两者同时加载，控制台就会抛出这个错误：

main.js:4 ERROR TypeError: $ is not a function

我现在完全摸不着头绪，试了好几种思路都没解决，有没有大佬能给我指条明路？

内容来源于stack exchange