I'm facing an issue with making angular and express routing work together with html5mode enabled. When I change state from '/' to my admins state, everything works fine until I refresh the page. Then I only get a json result of admins but my view disappears. Here is a snippet of relevant code:
Any assistance on this matter would be greatly appreciated. Thank you.
This is my file structure:
+-- client
| app
| admin.config.js
| admin.js
| admin.module.js
| assets
| views
| admin
| admin-edit.ejs
| admin-list.ejs
| lib
| bower components
+-- server
| routes
| index.js
| admins.js
| models
| Admin.js
| config
| dbconfig.js
| server.js
In my Angular module.config I have:
function config($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('admins', {
url : '/admins',
templateUrl: '/views/admin/admin-list.ejs',
controller : 'AdminController',
resolve : {
loginRequired: loginRequired,
getAdminList : getAdminList
}
});
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/admins');
My server.js file looks like:
/* Routes */
var routes = require('./routes/index');
var auth = require('./routes/auth');
var users = require('./routes/users');
var admins = require('./routes/admins');
var app = express();
/*************************************
App initialization
**************************************/
/* Auto increment mongoose plugin */
autoIncrement.initialize(connection);
/* Auth secret code*/
app.set('superSecret', dbconfig.SECRET);
/* View engine setup */
app.set('views', path.join(__dirname, '../client/views'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(cookieParser());
app.use(express.static('client'));
app.use('/', routes);
app.use('/auth', auth);
app.use('/users', users);
app.use('/admins', admins);
My index route looks like:
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function (req, res) {
res.render('index');
});
module.exports = router;
I tried adding this into my server.js
app.get('*', function (req, res){
res.sendFile(path.join(__dirname + '/client/index.ejs'));
});
and in this case when I refresh page while my url is /admins I get downloaded index page.
I also tried adding in my index.js route
router.get('*', function (req, res) {
res.render('index');
})
and as result of adding this is endless loop in my admins list.
In my index.ejs I have
<meta charset="utf-8">
<base href="/">