$oclazyload不使用AngularJS 1.5

Question

在实现$oclazyload时，我面临一个延迟加载组件的问题，如下所示

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;

问题

上面的代码不会抛出任何错误，provider.contoller.js也不会加载。

provider组件包含以下文件: provider.js、provider.html、provider.less、provider.component.js、provider.controller.js

PS

在provider.js中，所有的东西都可以正常工作，没有负载。

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

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

});

Answer 1

发行

1. 组件的定义是以不正确的方式完成的。
2. 没有必要使用$q，因为$ocLazyLoad本身会返回一个承诺。

下面的代码通过定义一个provider-component 并使用 $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');
                }]
            }
        });
});

文档，以了解更多可能的配置。

希望能帮上忙！