Flux Flux - 5 months ago 20
HTML Question

Chrome complaining about html tags in app.js

I am trying to make a simple SPA with angular and node. When I try to test if my SPA is working in chrome, chrome gives me a peculiar error. It is complaining about html tags in my demoApp.js, even though it does not contain any HTML code. How can this be?

Error: demoApp.js:1 Uncaught SyntaxError: Unexpected token <

test.html


<html ng-app="demoApp">
<head>
<title>My Angular App</title>

</head>

<body>
<h2>DemoApp Demo</h2>
<div>
<a href="#/partial1.html">Partial 1</a>
<a href="#/partial2.html">Partial 2</a>
<div ng-view></div>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src = "demoApp.js"></script>
</body>
</html>


demoApp.js

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

demoApp.config(['$routeProvider', function($routeProvider) {
$routeProvider

.when('/',
{
controller: 'SimpleController',
templateUrl: 'Partials/partial1.html'
}).when('/partial2',
{
controller: 'SimpleController',
templateUrl: 'Partials/partial2.html'
}).otherwise({redirectTo: '/'});
}]);


demoApp.controller('SimpleController', function($scope){
$scope.customers = [
{name:'Victor', city:'Norrköping'},
{name:'Mikael', city:'Göteborg'},
{name:'Jocke', city:'Göteborg'},
{name:'Skåne', city:'Ystad'}
];

$scope.addCustomer = function(){
$scope.customers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
}
});


server.js

//Lets require/import the HTTP module
var http = require('http');
var fs = require('fs');

//Lets define a port we want to listen to
const PORT=8080;

//We need a function which handles requests and send response
function handleRequest(request, response){
response.writeHead(200, {'Content-Type': 'text/html'});
fs.readFile('./test.html', null, function(error, data) {
if(error) {
response.writeHead(404);
response.write('File not found!');
} else {
response.write(data);
}
response.end();
});
}

//Create a server
var server = http.createServer(handleRequest);

//Lets start our server
server.listen(PORT, function(){
//Callback triggered when server is successfully listening. Hurray!
console.log("Server listening on: http://localhost:%s", PORT);
});

Answer

Your problem is that you are serving only your index.html no matter you request to your server.

You need to change your server.js to something like this:

//Lets require/import the HTTP module
var http = require('http');
var fs = require('fs');

//Lets define a port we want to listen to
const PORT=8080; 

//We need a function which handles requests and send response
function handleRequest(request, response){
    var path;
    if (request.url === '/') {
        path = './test.html';
        response.writeHead(200, {'Content-Type': 'text/html'});
    } else {
        response.writeHead(200, {'Content-Type': 'text/javascript'});
        path = '.' + request.url;
    }
    fs.readFile(path, null, function(error, data) {
        if(error) {
            response.writeHead(404);
            response.write('File not found!');
        } else {
            response.write(data);
        }
        response.end();
    });
}

//Create a server
var server = http.createServer(handleRequest);

//Lets start our server
server.listen(PORT, function(){
    //Callback triggered when server is successfully listening. Hurray!
    console.log("Server listening on: http://localhost:%s", PORT);
});

Note: this is a very bad static server, it just returns everything as a javascript. You should look at this question and create a better static server, or just use nginx