Angular node_modules：正确包含 JQuery 并防止“未定义窗口”错误

Posted 2023-03-08

【中文标题】Angular node_modules：正确包含 JQuery 并防止“未定义窗口”错误

【英文标题】：Angular node_modules: Including JQuery properly with also preventing the "window is not defined" error

【发布时间】：2018-10-03 15:28:43

【问题描述】：

我打开这个与this other question 严格相关的问题。

作为链接问题的故障排除，我需要了解如何在我的 Angular 应用程序中包含 jquery（我需要它，因为引导程序）但确保它不会导致问题中提到的“未定义窗口”错误以上。

jquery制作的“window”javascript函数的使用实际上给webpack服务端渲染带来了几个问题。

有谁知道如何以正确的方式将 JQuery 包含在 Angular 应用程序中（在使用 JQuery 之前定义“窗口”或/并将其从服务器渲染中排除）？

或者是否有任何节点库可以帮助提供“窗口”的声明？

提前致谢！

【问题讨论】：

How to include jQuery in my Angular app = 通常 Angular 初学者的大错误。别。 曾经。使用 Angular 或 jQuery，不要同时使用。它们是非常不同的工具，工作方式不同。用 Angular 或 jQuery 的方式做所有事情。

@JeremyThille 谢谢，但是引导程序呢？它需要 jquery 才能工作......有没有另一种方法可以让它在不使用 jquery 的情况下与 Angular 应用程序一起工作？

当然，有使用 Angular 制作的 Bootstrap 版本：ng-bootstrap.github.io/#/home

@JeremyThille 好的，谢谢！我可以认为您的 cmets 是一个正确的答案，因为现在我可以避免使用 JQuery，也可以避免由它引起的“找不到 Windows”问题。

很好，那我已经做出了正确的回答，如果有用，请考虑将其标记为已接受。

【参考方案1】：

不要在 Angular 中包含 jQuery。曾经。这两个库以非常不同的方式实现相似的事情。 jQuery 操作 DOM，但 Angular 会随着数据源的变化动态地生成和重新生成它。这两个家伙只会相互干扰并且交互非常差，导致大量的黑客攻击和变通方法，从而产生笨拙和不可维护的代码。更不用说您必须加载两个库而不是一个。

使用 jQuery 或 Angular，永远不要同时使用。

如果你从 jQuery 切换到 Angular，并且你习惯了 jQuery 插件——在你的情况下，更具体地说是 Bootstrap——大多数 jQuery 的插件都有一个 Angular 等价物。 Bootstrap 也不例外，你可以试试ng-bootstrap here。