loading modules and factories files using angular ui routing and ocLazyLoad

Question

i', using angular ui routing with ocLazyLoad to load the appendices files according to the choosen stat as the following code shows

my problem is:

when i load a new state and click refresh sometime the factories is not initialized -i think it's because the files is not fully loaded before init the controller-

i also tried to merge all files in the same ocLazyLoad function and use serie : true but dosenot work

is it the right use of ocLazyLoad

i've the following modules

  angular.module('app', [ "oc.lazyLoad"]);
  angular.module("app.inventory", []);
  angular.module("app.sales", []);

and here is the routing

.state("invoicesAddEdit", {
          url: "/invoice/:invoiceId",
          templateUrl: "app/components/sales/invoice/views/invoiceAddEdit.view.html",
          controller: "InvoiceAddEditController",

          resolve: {
              invoiceId: ['$stateParams', function ($stateParams) {
                  return $stateParams.invoiceId;
              }],
              settings: ['$ocLazyLoad', function ($ocLazyLoad) {
                  return $ocLazyLoad.load({
                      name: "app.settings",
                      files: [
                              "app/components/settings/settings.module.js",
                              "app/components/settings/currency/services/currency.factory.js",
                              "app/components/settings/deliveryMan/services/deliveryMan.factory.js",

                      ]
                  })
              }],

              inventory: ['$ocLazyLoad', function ($ocLazyLoad) {
                  return $ocLazyLoad.load({
                      name: "app.inventory",
                      files: [
                              "app/components/inventory/inventory.module.js",
                              "app/components/inventory/customer/services/customer.factory.js",
                              "app/components/inventory/store/services/store.factory.js",
                              "app/components/inventory/product/services/product.factory.js",

                      ]
                  })
              }],
              purchasing: ['$ocLazyLoad', function ($ocLazyLoad) {
                  return $ocLazyLoad.load({
                      name: "app.purchasing",
                      files: [
                              "app/components/purchasing/purchasing.module.js",
                              "app/components/purchasing/purchaseOrder/services/purchaseOrder.factory.js",

                      ]
                  })
              }],
              sales: ['$ocLazyLoad', function ($ocLazyLoad) {
                  return $ocLazyLoad.load({
                      name: "app.sales",
                      files: [
                              "app/components/sales/sales.module.js",
                              "app/components/sales/representative/services/representative.factory.js",

                              "app/components/sales/invoice/services/invoice.factory.js",
                              "app/components/sales/invoice/controllers/invoiceAddEdit.controller.js",

                      ]
                  })
              }],
          }
      })

Answer 1

Try to inject the oCLazy Load as deps and insert the required files before specific tag in the html like the following :

      resolve: {
          invoiceId: ['$stateParams', function ($stateParams) {
              return $stateParams.invoiceId;
          }],
          deps: ['$ocLazyLoad', function ($ocLazyLoad) {
              return $ocLazyLoad.load({
                 name: "app.settings",
                 insertBefore: '#ng_load_plugins_before', 
                 files: [
                          "app/components/settings/settings.module.js",
                          "app/components/settings/currency/services/currency.factory.js",
                          "app/components/settings/deliveryMan/services/deliveryMan.factory.js",

                  ]
              })
          }],

Add the following link to the header of the html page or the View:

  <link id="ng_load_plugins_before"/>