ocLazyLoad + UI Router navigating back to child view after page refresh - angularjs

Question

I'm using ocLazyLoad with AngularJS and AngularJS UI Router to load AngualarJS modules on demand. I have a Posts view/state and Post view/state in different modules and I can simply navigate between them.
The only issue is that when I'm on /posts/1 and manually refresh the page, it goes back to /. I understand that it makes perfect sense because app.js is the only file that gets loaded after page refresh but what I don't understand is how to make it lazy load the same /posts/1 view again after refreshing the page. I tried using $urlRouterProvider.when in app.js but had no luck.
I have created a plunker for this: http://plnkr.co/edit/lPb2qCGF9KLL16jVoLQo?p=info
app.js
angular.module('app', ['ui.router', 'oc.lazyLoad'])
.run(['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.state = $state;
$rootScope.stateParams = $stateParams;
}
])
.config([
'$ocLazyLoadProvider',
'$stateProvider',
'$urlRouterProvider',
function ($ocLazyLoadProvider, $stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /
$urlRouterProvider.otherwise('/');
$stateProvider
.state('app', {
url: '/',
views: {
header: {
template:
'<nav class="navbar navbar-default">' +
'<div class="container-fluid">' +
'<ul class="nav navbar-nav">' +
'<li><a ui-sref="app">Home</a></li>' +
'<li><a ui-sref="app.posts">Posts</a></li>' +
'</ul>' +
'</div>' +
'</nav>'
},
content: {
template: '<h3>Home view</h3>'
}
}
})
.state('app.posts', {
url: 'posts',
views: {
'content#': {
templateUrl: 'posts.html',
controller: 'PostsController',
resolve: {
load: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
serie: true,
files: [
'posts.js',
'posts-controller.js'
]
});
}]
}
}
}
});
}
]);
posts.js
angular.module('app.posts', ['ui.router', 'oc.lazyLoad'])
.config([
'$ocLazyLoadProvider',
'$stateProvider',
function ($ocLazyLoadProvider, $stateProvider) {
$stateProvider
.state('app.posts.post', {
url: '/:id',
views: {
post: {
templateUrl: 'post.html',
controller: 'PostController',
resolve: {
post: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
serie: true,
files: [
'post.js',
'post-controller.js'
]
});
}]
}
}
}
});
}
]);
post.js
angular.module('app.posts.post', []);

Answer 1

Lazy Loading ui-router states with ocLazyLoad and ui-router-extras futureStates
http://bardo.io/2014/08/26/oclazyload-future-states/