$stateProvider .state('app.warehouses.warehouse', { url: '/warehouse/:id', views: { "[email protected]": { 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!
I lazy load my routes like controllers as below.
// app.config(routes.js) ↓
$stateProvider
.state('app.warehouses', {
url: '/warehouses',
views: {
"[email protected]": {
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: {
"[email protected]": {
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: {
"[email protected]": {
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: {
"[email protected]": {
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?