Angular Ui-Router not routed when using node.js

Question

I am using angular ui router. The router seems to be working on the index.html homepage. But any other navigation does not work.

Here is my stateprovider angular:

var app = angular.module('myApp', ['ui.router']); app.config(function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/"); $stateProvider .state("home", { url: "/", templateUrl: "../partials/home/index.html" }) .state("login", { url:"/login", templateUrl: "../partials/account/login.html" }) .state("register", { url: "/register", templateUrl: "../partials/account/register.html" }) .state("values", { url: "/values", templateUrl: "../partials/test/values.html" }) ; }); 

HTML in my main index.html:

  <!--Content --> <div class="container"> <div ui-view></div> </div> <!-- END Content --> 

When I navigate the localhost: 8080 / login page, I get the following:

I would have thought that I would not even see this page if it could not find it. You should not redirect me back to "/" because of $ urlRouterProvider.otherwise (). Also, although the pattern url / partials / account / login.html is Exist.

I'm a little new to node.js and I'm curious if the file server for notes is trying to route and drag my angular one? I use an http server, which is probably the most common.

I also use Express Node if this helps. And here is the code for app.js, where, I think, the problem may arise from:

 var express = require('express'); var path = require('path'); var favicon = require('static-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var routes = require('./routes/index'); var users = require('./routes/users'); var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); app.use(favicon()); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded()); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/', routes); app.use('/users', users); /// catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); /// error handlers // development error handler // will print stacktrace if (app.get('env') === 'development') { app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: err }); }); } // production error handler // no stacktraces leaked to user app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: {} }); }); module.exports = app; 

Answer 1

I get it. Performing the action below made it work.

 app.use(function(req, res) { // Use res.sendfile, as it streams instead of reading the file into memory. res.sendfile(__dirname + '/public/index.html'); }); 

The whole app.js application, if anyone is interested where he goes.

 var express = require('express'); var path = require('path'); var favicon = require('static-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var routes = require('./routes/index'); var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); app.use(favicon()); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded()); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use(function(req, res) { // Use res.sendfile, as it streams instead of reading the file into memory. res.sendfile(__dirname + '/public/index.html'); }); app.use('/', routes); /// catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); /// error handlers // development error handler // will print stacktrace if (app.get('env') === 'development') { app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: err }); }); } // production error handler // no stacktraces leaked to user app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: {} }); }); module.exports = app; 

Of course, this should be in angular code:

 app.config(["$locationProvider", function($locationProvider) { $locationProvider.html5Mode(true); }]); 

One comment that bothered me. To do this, restart the server. ctr + c, then paste this code and then restart the server. Good luck.

Answer 2

You tried to use the same directory for your partitions:
move partials / account / login.html "to partials / home / login.html"
In addition, do you use your own server.js express configuration or a full-fledged full-flow?
angular explicitly handles routing, but it seems like nodejs is not finding assets ...

Be sure to perform a specific task to serve partial files on server.js

  function serve_partial(req,res){ var stripped = req.url.split('.')[0]; var requestedView = path.join('./', stripped); res.render(requestedView, function(err, html) { if(err) { res.render('404'); } else { res.send(html); } }); } function serve_index(req,res){ res.render('index'); } // Angular Routes app.get('/partials/*', serve_partial); app.get('/*', serve_index); 

for your case, it might give me something like:

  var express = require('express'); var path = require('path'); var favicon = require('static-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var routes = require('./routes/index'); var users = require('./routes/users'); var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); app.use(favicon()); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded()); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); function serve_partial(req,res){ var stripped = req.url.split('.')[0]; var requestedView = path.join('./', stripped); res.render(requestedView, function(err, html) { if(err) { res.render('404'); } else { res.send(html); } }); } app.use('/partials/*', serve_partial); app.use('/', routes); app.use('/users', users); /// catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); /// error handlers // development error handler // will print stacktrace if (app.get('env') === 'development') { app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: err }); }); } // production error handler // no stacktraces leaked to user app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: {} }); }); module.exports = app; 

Answer 3

As I see, you request your node api, which has no route like / login, and you get 404.

You should try localhost: 8080 / # / login