I cannot get my Angular app running locally

Question

I cannot get my angular application to run locally. I am getting an error that my interview.js and angular.js are not being found. Also, angular is not defined in the interview.js file when I open it from the dev console.

Here is my directory structure:

mock public index.html src services interview.js vendor angular.js

Here is my index.html

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Interview Practice</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="../vendor/angular.js" type="text/javascript"></script> </head> <body ng-app="interviewapp"> hello world! <script src="../src/interview.js" type="text/javascript"></script> </body> </html>

Here is my interview.js

angular.module("interviewapp", []); console.log("does this work");

I'm using http-server to start the application.

Starting up http-server, serving ./public Available on: http://10.66.87.184:8080 http://192.168.56.1:8080 http://127.0.0.1:8080

Going to localhost, or any of the https listed there, this is the error I get:

http://10.66.87.184:8080/vendor/angular.js Failed to load resource: the server responded with a status of 404 (Not Found) http://10.66.87.184:8080/src/interview.js Failed to load resource: the server responded with a status of 404 (Not Found)

How do I fix this so that my app runs?

Move src and vendor directories into public directory and remove the .. from the start of your paths to files e.g. change src="../src/interview.js" to src="/src/interview.js" — StudioTime
– StudioTime, Commented Sep 30, 2016 at 21:29
I linked a cdn for angular, and did what you said for the src folder. Could you tell me why that worked? — McFiddlyWiddly
– McFiddlyWiddly, Commented Sep 30, 2016 at 21:33

StudioTime · Accepted Answer · 2016-09-30 21:34:46Z

As stated in the comment:

Move src and vendor directories into public directory and remove the .. from the start of your paths to files e.g. change src="../src/interview.js" to src="/src/interview.js"

This works because your server is using public as the root folder, therefore it cannot see the other folders you're trying to access. By moving them in to public folder, it can then access them.

BiJ · Accepted Answer · 2016-09-30 21:38:55Z

Your server is serving public folder. So anything within that folder can be accessed via your host name. But you have kept src and vendor out side of public, hence they are not served through your server. In order to access them put them in public folder and remove the .. before your js reference.

ruby_newbie · Accepted Answer · 2016-09-30 22:45:26Z

change your project structure to look like this:

mock public index.html src vendor

also change this:

<script src="../vendor/angular.js" type="text/javascript"></script>

to this:

<script src="/vendor/angular.js" type="text/javascript"></script>

and this:

<script src="../src/interview.js" type="text/javascript"></script>

to this

<script src="/src/interview.js" type="text/javascript"></script>

So all of your javascripts should be in your public directory. Also never use relative paths for include tags. Anything in public should be accessible since it is the root folder.

Collectives™ on Stack Overflow

I cannot get my Angular app running locally

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related