首页 文章

使用Webpack延迟加载Angular模块

提问于
浏览 次
2

我有一些困难 . Webpack似乎正确生成分割点，因为我看到创建的 1.bundle.js 包含子应用程序的代码，但是当我加载页面时没有看到 1.bundle.js 的任何请求，并且子应用程序没有初始化 . console.log 似乎永远不会发射，它甚至似乎没有达到 $oclazyload 初始化模块的程度 .

有几点我很困惑 .

1）webpack会向服务器发出请求，还是我必须手动加载第二个捆绑包？ （我试过了两个，都没有用）

2）如果我确实需要手动加载软件包，它们应按什么顺序加载？

3） require.ensure 的第三个参数可以让你控制包的名称，但无论我传递什么字符串，包都被命名为 1.bundle.js .

4）为什么我不能单步执行调试器中 require.ensure 块内的代码？当我这样做时，我最终会在Chrome源视图中查看此内容：

undefined


/** WEBPACK FOOTER **
 ** 
 **/

（以下代码）

主入口点代码：

'use strict';

import angular from 'angular';
import 'angular-ui-router';
import 'oclazyload';


angular.module('parentApp', [
  'ui.router',
])
  .config(['$urlRouterProvider', '$locationProvider', ($urlRouterProvider, $locationProvider) => {
    $urlRouterProvider
      .otherwise('/');

    $locationProvider.html5Mode(true);
  }])

  .config(['$stateProvider', ($stateProvider) => {
    $stateProvider
      .state('child-app', {
        url: '/child-app',
        template: '<child-app></child-app>',
        resolve: {
          loadAppModule: ($q, $ocLazyLoad) => {
            return $q((resolve) => {
              require.ensure(['./child-app/app.js'], (require) => {
                let module = require('./child-app/app.js');
                console.log(module);
                $oclazyload.load({name: 'childApp'});
                resolve(module.controller);
              });
            })
          }
        },
        controller: function() {
        }
      })
  }]);

儿童应用：

'use strict';

import childAppTemplateURL from '../templates/child-app.html';
import childAppController from './controllers/childAppController';

export default angular.module('parentApp.childApp', [])

  .component('applicationListApp', {
      templateUrl: childAppTemplateURL,
      controller: childAppController
  });
javascript angularjs webpack lazy-loading oclazyload

1 回答

  • 2

    这个问题与 require.ensure 实施无关 . 这是由于 ocLazyLoad 打包的方式有些奇怪（https://github.com/ocombe/ocLazyLoad/issues/179） . 在我的案例中修复很简单，我只是将 'oc.lazyLoad' 添加到模块依赖项中 .

    angular.module('parentApp', [
  'ui.router',
  'oc.lazyLoad'
])

    为了回答我自己的两个问题，Webpack确实向服务器请求了捆绑包，而您不必手动加载捆绑包 . 让我感到困惑的一个问题是：如果 resolve 块包含无法解析的承诺，它将无声地失败 . 在我的情况下 $ocLazyLoad.load() 失败了，但没有迹象表明失败 . 唯一的线索是状态提供程序没有向DOM添加 <child-app></child-app> 标记，这意味着它实际上正在初始化状态 .

    回复于

相关问题