避免代码重复

Question

我目前使用的项目角度1.5和我的路由看起来是这样的：

const routes = ($stateProvider) => { 

    $stateProvider 
    .state('update', { 
     url: '/update', 
     template: '<update></update>', 
     resolve: { 
     lazyload: [ '$q', '$ocLazyLoad', function ($q, $ocLazyLoad) { 
      console.log('start lazy'); 
      let deferred = $q.defer(); 
      require.ensure([], function() { 
      let module = require('../components/update/update.module'); 
       let module = require('../components/update/update.module'); 
       $ocLazyLoad.load({ 
       name: module.default.name 
       }); 
       deferred.resolve(module); 
      }); 
      return deferred.promise; 
      } 
     ] 
     } 
    }) 
    .state('login', { 
     url: '/login', 
     template: '<login></login>', 
     resolve: { 
     lazyload: [ '$q', '$ocLazyLoad', function ($q, $ocLazyLoad) { 
      let deferred = $q.defer(); 
      require.ensure([], function() { 
       let module = require('../components/login/login.module'); 
       $ocLazyLoad.load({ 
       name: module.default.name 
       }); 
       deferred.resolve(module) 
      }); 
      return deferred.promise; 
      } 
     ] 
     } 
    }); 

}; 

当我尝试在一个单独提取重复的代码功能是这样的：

function load (modulePath) { 
    return function ($q, $ocLazyLoad) { 
     let deferred = $q.defer(); 
     require.ensure([], function() { 
     let module = require(modulePath); 
     $ocLazyLoad.load({ 
      name: module.default.name 
     }); 
     deferred.resolve(module); 
     }); 
     return deferred.promise; 
    } 
    } 

并且以这种方式使用该负载函数：

$stateProvider 
    .state('update', { 
     url: '/update', 
     template: '<update></update>', 
     resolve: { 
     lazyload: [ '$q', '$ocLazyLoad', load('../components/update/update.module')] 
     } 
    }) 

路由不再工作，我得到这个错误“无法找到模块”。“在webpackMissingModule”

Answer 1

当使用动态要求时，不要在参数中包含路径和扩展名。

把你所有的懒惰模块需要在一个单独的文件夹lazy。

function load (state) { 
 
    return function ($q, $ocLazyLoad) { 
 
    let deferred = $q.defer(); 
 
    require.ensure([], function() { 
 
     let module = require('../components/lazy/' +state+ '.module'); 
 
     $ocLazyLoad.load({ 
 
     name: module.default.name 
 
     }); 
 
     deferred.resolve(module); 
 
    }); 
 
    return deferred.promise; 
 
    } 
 
} 
 

 
$stateProvider 
 
.state('update', { 
 
    url: '/update', 
 
    template: '<update></update>', 
 
    resolve: { 
 
    lazyload: [ '$q', '$ocLazyLoad', load('update')] 
 
    } 
 
})

您可以使用不同的结构所提出的一个。参考https://webpack.github.io/docs/context.html#dynamic-requires