$oclazyload not working with AngularJS 1.5

Question

I am facing an issue in the implementing $oclazyload to defer loading of my components as shown below

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import providerComponent from './provider.component';

let providerModule = angular.module('provider', [
        //uiRouter
    ])
    .config(($stateProvider, $compileProvider) => {
        "ngInject";

        $stateProvider
            .state('provider', {
                url: '/provider',
                template: require('./provider.html'),
                resolve: {
                    deps: ($q, $ocLazyLoad) => {
                        "ngInject";

                        var deferred = $q.defer();

                        require.ensure([], function() {
                            let component = require('./provider.component').default;

                            $ocLazyLoad.inject([])
                                .then(() => $compileProvider.component('provider', component))
                                .then(deferred.resolve);

                        }, 'provider');

                        return deferred.promise;
                    }
                }
            });
    }).name;

export default apiListModule;

Problem

The code above does not throw any errors and the provider.contoller.js doesn't load.

provider component contains following files: provider.js, provider.html, provider.less, provider.component.js, provider.controller.js

PS

Everything works fine without lazyload in provider.js

.config(($stateProvider) => {
    "ngInject";

    $stateProvider
    .state('provider', {
        url: '/provider',
        component: 'provider'
    });

});

Answer 1

Issues

1. Definition of the component is done in an incorrect way.
2. There is no need to use $q as $ocLazyLoad returns a promise itself.

---

The code below works by defining a provider-component and loading it with $stateProvider

.config(($stateProvider, $ocLazyLoadProvider) => {

    $ocLazyLoadProvider.config({
        modules: [{
            name: 'provider-component',
            files: ['provider.component.js', 'provider.js', 'provider.html', 'provider.less']
        }]
    });

    $stateProvider
        .state('provider', {
            url: '/provider',
            template: './provider.html',
            resolve: {
                load: ['$ocLazyLoad', function($ocLazyLoad) {
                    // will load the predefined configuration
                    return $ocLazyLoad.load('provider-component');
                }]
            }
        });
});

Documentation to know more about possible configurations.

Hope it helps!