Lazy load routes in Angularjs with $ocLazyLoad

Question

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?