延迟在ui-router中将Angular指令作为Webpack块加载

Question

我试图延迟加载Angular指令作为webpack块。

这是我当前使用ocLazyLoad的配置尝试：

// Basic Config
function routingBase( $urlRouterProvider, $locationProvider, $stateProvider ) { 

    $locationProvider.html5Mode(true);

    $stateProvider
        .state('home', {
            url: '/home',
            template: '<app-main></app-main>',
            resolve: {
                load: ( $q, $ocLazyLoad ) => {

                    let deferred = $q.defer(); 

                    require.ensure([], (require) => {

                        // Load entire module
                        let module = require('../modules/main');

                        $ocLazyLoad.load({ 
                            name: module.name 
                        });

                        deferred.resolve(module);

                    }, 'app-main');

                    return deferred.promise;
                }
            }
        })
}

这进入myModule.config(routingBase); 。

../modules/main只是一个导出指令的角度模块（例如， export default angular.module('main',[]).directive('appMain', appMainFn);

有小费吗？ 我得到的是<app-main></app-main>已正确添加到文档中，并且该块已正确加载为模块。 但是它不会被替换（它保持为<app-main></app-main> ）。

您是否会推荐一种不同的方法来延迟加载块（也许使用$compileProvider ）？ 我想要最干净的方法。

非常感谢您的帮助。

Answer 1

我能够在当前项目中使用它。 只需更改以下行即可看到它的工作原理。 您还需要添加默认值 ，因为您要将角度模块导出为默认值。 干杯!

$ocLazyLoad.load({ 
name: module.default.name 
});