ocLazyLoad

I lazy load my routes like controllers as below.
// app.config(routes.js) ↓

$stateProvider
.state('app.warehouses', {
url: '/warehouses',
views: {
"appContent@app": {
templateUrl: 'warehouses/warehouses.html',
controller: 'warehousesCtrl'
},
resolve: {
loadCtrl: ['$ocLazyLoad', ($ocLazyLoad) => {
return $ocLazyLoad.load({
files: [
'warehouses/warehousesRoute.js', // lazy load routes
'warehouses/warehousesCtrl.js'
]
});
}]
},
})

// warehousesRoute.js ↓

$stateProvider
.state('app.warehouses.warehouse', {
url: '/warehouse/:id',
views: {
"appContent@app": {
templateUrl: 'warehouses/warehouse.html',
controller: 'warehouseCtrl'
}
},
resolve: {
loadCtrl: ['$ocLazyLoad', ($ocLazyLoad) => {
return $ocLazyLoad.load('warehouses/warehouse/warehouseCtrl.js');
}]
}
})

I'm using Angular-ui-router for routing and oclazyload to load each controllers base on routes (lazy loading).

Problem: My route.js file is getting bigger and bigger (8000 line until now!)

I lazy load my routes like controllers as below.

// app.config(routes.js) ↓

$stateProvider
.state('app.warehouses', {
url: '/warehouses',
views: {
"appContent@app": {
templateUrl: 'warehouses/warehouses.html',
controller: 'warehousesCtrl'
},
resolve: {
loadCtrl: ['$ocLazyLoad', ($ocLazyLoad) => {
return $ocLazyLoad.load({
files: [
'warehouses/warehousesRoute.js', // lazy load routes
'warehouses/warehousesCtrl.js'
]
});
}]
},
})

// warehousesRoute.js ↓

$stateProvider
.state('app.warehouses.warehouse', {
url: '/warehouse/:id',
views: {
"appContent@app": {
templateUrl: 'warehouses/warehouse.html',
controller: 'warehouseCtrl'
}
},
resolve: {
loadCtrl: ['$ocLazyLoad', ($ocLazyLoad) => {
return $ocLazyLoad.load('warehouses/warehouse/warehouseCtrl.js');
}]
}
})
Every thing work fine before refresh app in child views.

That means:

When I go to child route (app.warehouses.warehouse/:id) by clicking on link, work fine, But when I refresh page in child route (warehouse/:id), I go to 404 Not Found page!

How Can I solve this Problem?