javascript - $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

附注

provider.js 中没有延迟加载，一切正常

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

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

});

Answer 1

问题

1. 组件的定义方式不正确。
2. 无需使用 $q，因为 $ocLazyLoad 本身会返回一个 Promise。

<小时/>

下面的代码通过定义 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');
                }]
            }
        });
});

Documentation to know more about possible configurations.

希望对你有帮助!