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 
});

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

1 个答案: