【问题标题】:Angularjs and bootstrap library files not found (404) http-serve找不到 Angularjs 和引导库文件 (404) http-serve
【发布时间】:2019-11-11 02:07:39
【问题描述】:

我正在创建一个小应用程序来学习 angularjs 并使用 npm 安装它和其他依赖项。为了为应用程序提供服务,我在本地通过 npm 安装了 http-server 包。我的应用目录结构是这样的

餐厅 > 应用程序、node_modules、package.json

app 文件夹的样子

app > index.html, app.js

在我的 index.html 中,我尝试像这样从 node_modules 引用 angular.min.js 和引导 css 文件

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/angular/angular.min.js"></script>
<script src="../app.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js>"></script>

在 app.js 内部,我声明了一个 angularjs 模块,因此我可以从我的 index.html 文件中打印插值结果。

package.json:

{
  "name": "restaurant",
  "version": "1.0.0",
  "description": "An AngularJS app for Restaurants",
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "http-server": "^0.11.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "http-server -a localhost -p 4000 ./app"
  },
  "dependencies": {
    "angular": "^1.7.8",
    "bootstrap": "^4.3.1"
  }
}

当我运行 npm start 并转到 localhost:4000/index.html 它说

GET http://localhost:4000/node_modules/bootstrap/dist/css/bootstrap.min.css net::ERR_ABORTED 404 (Not Found)
index.html:4

GET http://localhost:4000/node_modules/angular/angular.min.js net::ERR_ABORTED 404 (Not Found)
app.js:1 Uncaught ReferenceError: angular is not defined
    at app.js:1
(anonymous) @ app.js:1
index.html:6 GET

http://localhost:4000/node_modules/bootstrap/dist/js/bootstrap.min.js%3E net::ERR_ABORTED 404 (Not Found)

我的问题是我是否必须在我的包中编写一些命令才能将 angularjs 和其他库文件复制到我的应用程序目录的其他文件夹中?

如果不是,为什么 localhost:4000/index.html 找不到这些文件?

适用于任何解决方案的 TIA。

【问题讨论】:

    标签: node.js angularjs npm node-modules


    【解决方案1】:

    您要求 Web 服务器提供目录 app 下的所有内容。因此,在 Web 服务器上,app 目录中的 root。因此,唯一可以提供的两个文件是/index.html(服务器在其根目录中找到:app)和/app.js(它也在其根目录中找到app)。

    根,顾名思义,就是根。根之上没有任何东西,否则它就不是根。因此,当您已经处于根目录时,要求 ../anything 是没有意义的。

    旁注:AngularJS 基本上是一个官方废弃的框架。它仍在维护(仅安全错误修复,请参阅documentation)几个月,然后就完成了。你为什么要学习一个废弃的框架?

    【讨论】:

    • 我也是这么想的,不知道如何在 index.html 中引用库文件我通过安装 cpx 来复制库文件解决了这个问题(我相信还有其他方法我不知道)在 app/ 内的目录中使用我的 package.json 中的 postinstall 命令回答你的旁注我已经知道 angularjs,因为这是我们目前在工作中使用的框架,但我想提高我的技能来回答任何问题这可能会在以后的采访中出现。我不太了解的是 npm 和 node 模块以及较新的 javascript 生态系统是如何工作的。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-12-15
    • 2017-07-08
    • 1970-01-01
    • 2011-06-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多