I'm following this node/angular tutorial and am getting the following errors:
I'm bootstrapping my app through node, which renders index page:
module.exports = function(app) {
app.get('*', function(req, res) {
res.sendfile('./public/index.html');
...
});
Which renders:
<html ng-app="DDE">
<head>
<script src="//ajax.googleapis/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/main.js"></script>
</head>
<body>
This is the index page
<div ng-view></div>
I'd like Node to handle the initial page load, but Angular to handle the rest of the routing. The problem is here: It doesn't seem my angular routing is working. I put a self-exec fn run() in there to test, but it's not being called.
I'm simply trying to test display the testpage.html template:
app.js file:
angular
.module('DDE', [
'ngRoute'
])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/test', {
run : (function() {
alert('hit');
})(),
templateUrl: '../html/partials/testpage.html'
}).
otherwise({
redirectTo: '/test'
});
}
]);
The angular error isn't very helpful. I'm not sure what Unexpected token < means as I cannot find where I've added an extra < anywhere.
EDIT:
app.get('/', function(req, res) {
res.send('./public/index.html');
});
It should be able to find the stuff in bower components as the pathing is correct:
root/bower_components/angular/angular.js
root/bower_components/angular-route/angular-route.js
I'm following this node/angular tutorial and am getting the following errors:
I'm bootstrapping my app through node, which renders index page:
module.exports = function(app) {
app.get('*', function(req, res) {
res.sendfile('./public/index.html');
...
});
Which renders:
<html ng-app="DDE">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/main.js"></script>
</head>
<body>
This is the index page
<div ng-view></div>
I'd like Node to handle the initial page load, but Angular to handle the rest of the routing. The problem is here: It doesn't seem my angular routing is working. I put a self-exec fn run() in there to test, but it's not being called.
I'm simply trying to test display the testpage.html template:
app.js file:
angular
.module('DDE', [
'ngRoute'
])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/test', {
run : (function() {
alert('hit');
})(),
templateUrl: '../html/partials/testpage.html'
}).
otherwise({
redirectTo: '/test'
});
}
]);
The angular error isn't very helpful. I'm not sure what Unexpected token < means as I cannot find where I've added an extra < anywhere.
EDIT:
app.get('/', function(req, res) {
res.send('./public/index.html');
});
It should be able to find the stuff in bower components as the pathing is correct:
root/bower_components/angular/angular.js
root/bower_components/angular-route/angular-route.js
2 Answers
Reset to default 17You are missing some settings in your app file on the server to handle all of the requests being made to the server. Here is a basic sample working express file, which you can modify to fit your environment:
var express = require('express');
var app = express();
app.use('/js', express.static(__dirname + '/js'));
app.use('/bower_components', express.static(__dirname + '/../bower_components'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));
app.all('/*', function(req, res, next) {
// Just send the index.html for other files to support HTML5Mode
res.sendFile('index.html', { root: __dirname });
});
This file uses express.static to serve any content which is in the specific directory regardless of name or type. Also keep in mind that Express use statements are processed in order, and the first match is taken, any matches after the first are ignored. So in this example, if it isn't a file in the /js, /bower_components, /css, or /partials directory, the index.html will be returned.
I was able to resolve my issue with the unexpected token by moving my server.js file from the DIST directory into the directory above.
So my folder/file structure looks like this:
webroot - root folder
server.js
dist (folder)
browser (subfolder)
server (subfolder)
Unexpected token <suggests thatangular.jsis an HTML document, not a JavaScript file. Check you are serving up what you think you are serving up for the request. – Quentin Commented Jul 18, 2015 at 21:30app.get('*', function(req, res) { res.sendfile('./public/index.html');is going to sendindex.htmlfor every request to the server; requests for .js files, requests for .jpg or .png files, everything. – Claies Commented Jul 18, 2015 at 21:35app.get('/',andres.send('./public/index.html');, see above please – user3871 Commented Jul 18, 2015 at 21:41index.htmlfor those requests, you just aren't sending anything. – Claies Commented Jul 18, 2015 at 21:41jsfiles it needs, why do I need an extra express command? – user3871 Commented Jul 18, 2015 at 21:44