避免代碼重複

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