CODEWITHSUNDEEP
node.jsangularjsnpmnode-modules
Ajitesh Chhatani
Ajitesh Chhatani

Reputation: 65

Angularjs and bootstrap library files not found (404) http-serve

I am creating a small app to learn angularjs and installed it and other dependencies using npm. To serve the application I installed http-server package via npm locally. My app directory structure looks like so

restaurant > app, node_modules, package.json

The app folder looks like

app > index.html, app.js

Inside my index.html i tried referencing angular.min.js and bootstrap css files from node_modules like so

<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>

Inside of app.js I have declared an angularjs module so i can print an interpolation result from my index.html file.

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"
  }
}

When i run npm start and go to localhost:4000/index.html it says 

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)

My question is do I have to write some command inside my package to copy angularjs and other library files inside some other folder in my app directory?

If not why is localhost:4000/index.html not able to find these files?

TIA for any solutions.

Upvotes: 0

Views: 1299

Answers (1)

JB Nizet
JB Nizet

Reputation: 692071

You're asking the web server to serve everything under the directory app. So, on the web server, the root in the appdirectory. So the only two files that can ber served are /index.html (which the server finds in its root directory: app), and /app.js (which it also finds in its root directory app).

The root, by definition, is the root. There is nothing above the root, otherwise it wouldn't be the root. So asking for ../anythingwhen you're already at the root makes no sense.

Side note: AngularJS is basically an officially abandoned framework. It's still being maintained (security bug fixes only, see documentation) for a few months, and then it's finished. Why are you learning an abandoned framework?

Upvotes: 0

Related Questions