jQuery不会加载答案

【问题标题】：Jquery won't loadjQuery不会加载
【发布时间】：2017-05-07 14:04:53
【问题描述】：

大家好，我正在尝试为我正在学习的这个 Angular 2 课程运行一个 html 文件。在为应用程序创建依赖项后，我使用 npm 下载了它们。现在，当我尝试运行该应用程序时，出现此错误..

file:///Users/Rocky/Angular2-course/skeleton/node_modules/jquery/dist/jquery.min.js 加载资源失败：net::ERR_FILE_NOT_FOUND

这就是我编写 jquery 脚本的方式..

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/tether/dist/js/tether.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

【问题讨论】：

你能告诉我们文件所在的完整路径吗？看起来是路径问题。同时告诉我们您的 HTML 文件的位置
或者文件没有权限？
抱歉，我如何向您显示文件所在的路径？ @RajshekarReddy
加载资源失败：net::ERR_FILE_NOT_FOUND 表示你的jQuery文件路径错误。回来看看。
如果 jquery 没有在我的 node_modules 中退出，我该怎么办。它应该在我安装 NPM 包时下载。 @DucFilan

标签： javascript jquery angularjs node.js

【解决方案1】：

如果您的文件位于“./node_modules/jquery/dist/”中。然后，您页面中的脚本标记将如下所示：

<script src="/scripts/jquery.min.js"></script>

如果你在 nodejs 中使用 express，静态路由就这么简单：

app.use('/scripts', express.static(__dirname + '/node_modules/jquery/dist/'));

然后，来自 /scripts/xxx.js 的任何浏览器请求都将自动从您的 dist 目录中获取。

注意：较新版本的 NPM 将更多内容放在顶层，没有嵌套那么深，因此如果您使用较新版本的 NPM，那么路径名称将与 OP 问题和当前答案中指示的不同.但是，这个概念还是一样的。您找出文件在服务器驱动器上的物理位置，并使用 express.static() 创建一个 app.use() 来创建这些文件的伪路径，这样您就不会将实际的服务器文件系统组织暴露给客户。

【讨论】：

感谢工作。另一个问题，我遇到了一个错误
zone.js:1382 XMLHttpRequest 无法加载文件：///Users/Rocky/Angular2-course/skeleton/app/main.js。跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https、chrome-extension-resource。
我什至没有创建一个名为 zone.js 的文件所以我不知道它是什么？
node_modules 目录中是否存在 angular2-skeleton 包？它在 systemjs.config.js 中配置正确吗？但这是一个不同的问题。你应该在另一个线程中问它。
P/s：zone.js 是 Angular 的一部分。区域是跨异步任务持续存在的执行上下文。您可以将其视为 JavaScript VM 的线程本地存储。

【解决方案2】：

如果你使用 Angular，你想尽量避免使用 jQuery，因为 Angular 带有 jqLite。尝试为 Angular 2 制作的 Bootstrap 版本。查看https://ng-bootstrap.github.io/#/getting-started

另外，是否曾经链接它们？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

【讨论】：