CODEWITHSUNDEEP
javascriptangularjs
dhanushkac
dhanushkac

Reputation: 550

404 while importing external scripts angular

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

Upvotes: 2

Views: 1081

Answers (2)

Arjun Nayak
Arjun Nayak

Reputation: 1260

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.

Upvotes: 0

dhanushkac
dhanushkac

Reputation: 550

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

Upvotes: 1

Related Questions