Here is my front-end AngularJS routing:
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true).hashPrefix('!');
$stateProvider
.state('main', {
url: '/',
templateUrl: '/views/main.html',
controller: 'MainCtrl'
})
.state('review', {
url: '/review',
templateUrl: '/views/review.html',
controller: 'NewReviewCtrl'
})
.state('model', {
url: '/:make/:model',
templateUrl: '/views/model.html',
controller: 'ModelPageCtrl'
});
And here is my server-side routing (node.js):
//...some routes
app.use('/*', function(req, res){
res.sendFile(config.rootPath + '/public/index.html');
});
With /review route, everything works fine, but not with /:make/:model:
HTML:
<a href="" ui-sref="model({make: 'lenovo', model: 'thinkpad-t430'})">See more details...</a>
If I go to this page through that link, everything works fine, but if I refresh or go directly to localhost:3030/lenovo/thinkpad-t430 I get this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app to:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
It is probably because of the html5mode. And I suggest it not working with this URL because, it is a 2 level URL.
How can I fix this?
Edit: Express.js config:
app.set('view engine', 'ejs');
app.use(function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
next();
});
app.use(bodyParser());
app.use(session({secret:"some_secret"}));
app.use(passport.initialize());
app.use(passport.session());
app.use(express.static(config.rootPath+"/public"));
I created working plunker, which does use the same UI-Router setting as mentioned above. Everything is working. So, we should know now, that the Client side should be set properly.
The main and only difference is, more explicit setting, which allows us to omit <base href="/" /> in the head
$locationProvider
.html5Mode(
{
enabled: true,
requireBase: false,
})
Or we can use the <base> element (check the index.html <head>) int that plunker
Seems like the issue is on the server side, please check twice: