404 while importing external scripts angular

Question

I am trying to include Angular module as a separate file.

Here is my app.js

var app = angular.module('app', ['ngRoute']);
app.controller("TodoController", function($scope) {
  $scope.players = ["Tom", "Dick", "Harry"];
});

This is my index.html

<html ng-app="app">
    <head>
        <title>Hello Angular!</title>
    </head>
    <body ng-controller="TodoController">
        <input type="text" name="" ng-model="name"> {{name}}

        <ul>
            <li ng-repeat="player in players">
            {{ player }}
            </li>
        </ul>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-route.min.js"></script>
        <script src="scripts/app.js"></script>
    </body>
</html>

I am using express with node. This is my server.js

var express = require('express');
var app = express();
var path = require('path');

var port = process.env.PORT || 5000;

app.get('/', function(req, res){
  //res.sendfile('./index.html');
  res.sendFile('index.html', { root: path.join(__dirname) });
});

app.listen(port);
console.log('Express app is listening on : ' + port);

When I am trying to execute I am getting http://localhost:5000/scripts/app.js 404 (Not Found)

Code is working well when everything put in to the index.html.

File Structure is like this.

-- index.html
-- server.js
-- scripts
    -- app.js

You can refer this expressjs.com/en/starter/static-files.html app.use('/static', express.static(path.join(__dirname, 'public'))) — Jayant Patil
– Jayant Patil, Commented Jul 11, 2017 at 7:06
The error is pretty self explainatory, the code is not able to find your app.js file. Is script/app.js sitting beside index.html? — Samuel Toh
– Samuel Toh, Commented Jul 11, 2017 at 7:10
@SamuelToh yes scripts folder is in the same path as index.html — dhanushkac
– dhanushkac, Commented Jul 11, 2017 at 7:12

dhanushkac · Accepted Answer · 2017-07-11 07:44:27Z

I have found the solution. as mentioned on the comment issue was with Serving static files in Express. I have included this code to the server.js.

app.use(express.static('public'))

I also created the public folder and included app.js to the public folder.

My new code looks like this.

public/index.html

<html ng-app='app'>
    <head>
        <title>Hello Angular!</title>
    </head>
    <body ng-controller="TodoController">
        <input type="text" name="" ng-model="name"> {{name}}

        <ul>
            <li ng-repeat="todo in todos">
                <input type="checkbox" ng-model="todo.completed">
                {{todo.title}}
            </li>
        </ul>

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-route.min.js"></script>
        <script type='text/javascript' src="app.js" charset="UTF-8"></script>
        <script type='text/javascript' src="app/controllers/TodoController.js" charset="UTF-8"></script>
    </body>
</html>

Server.js

var express = require('express');
var app = express();
var path = require('path');

var port = process.env.PORT || 5000;

app.get('/', function(req, res){
  res.sendFile('index.html', { root: path.join(__dirname, 'public') });
});

app.use(express.static(path.join(__dirname, 'public')));

app.listen(port);
console.log('Express app is listening on : ' + port);

public/controllers/TodoController.js

app.controller('TodoController', ['$scope', function ($scope) {
    $scope.todos = [
    { title: 'Learn Javascript', completed: true },
    { title: 'Learn Angular.js', completed: false },
    { title: 'Love this tutorial', completed: true },
    { title: 'Learn Javascript design patterns', completed: false },
    { title: 'Build Node.js backend', completed: false },
    ];
}]);

public/app.js

var app = angular.module('app', []);

New file structure will be like this.

-- public
  -- app
    -- controllers
      -- TodoController.js
  -- app.js
  -- index.html
-- server.js
-- package.json

Arjun Nayak · Accepted Answer · 2017-07-11 07:48:39Z

0

Since you have only http://localhost:5000/ route which is exposed which renders index.html file.

app.get('/', function(req, res){
  //res.sendfile('./index.html');
  res.sendFile('index.html', { root: path.join(__dirname) });
});

Any other path will give you 404. You cannot access http://localhost:5000/scripts/ directly. To access scripts please add the following line in server.js

app.use(express.static(path.join(__dirname, 'scripts')));

Updated code for server.js will be.

var express = require('express');
var app = express();
var path = require('path');

var port = process.env.PORT || 5000;
app.use(express.static(path.join(__dirname, 'scripts')));
app.get('/', function(req, res){
  //res.sendfile('./index.html');
  res.sendFile('index.html', { root: path.join(__dirname) });
});

app.listen(port);
console.log('Express app is listening on : ' + port);

Now http://localhost:5000/scripts/app.js should not give 404. Not just scripts/app.js, You can access any file which is in scripts folder now.

edited Jul 11, 2017 at 7:48

answered Jul 11, 2017 at 7:41

Arjun Nayak

1,2601 gold badge13 silver badges22 bronze badges

1 Comment

dhanushkac Over a year ago

Yes this is the solution. Thank you.

Collectives™ on Stack Overflow

404 while importing external scripts angular

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related