Webpack Uglify 导致路由停止工作答案

【问题标题】：Webpack Uglify causes routing to stop workWebpack Uglify 导致路由停止工作
【发布时间】：2015-06-26 01:52:22
【问题描述】：

当我 uglify webpack 包时，路由停止工作，没有任何错误消息或日志消息。我正在使用 oclazyload 来延迟加载。

Route.js

module.exports = function(app) {
    var routeConfig = function($stateProvider) {
        $stateProvider
            .state('home', {
                url: '/',
                templateUrl: 'app/dashboard/dashboard.min.html',
                title: 'Home',
                ncyBreadcrumb: {
                    label: 'Home'
                }
            })
            .state('organizationStructure', {
                url: '/organizationStructure',
                templateUrl: 'app/admin/organizationStructure/manageHierarchy/manageHierarchyShell.min.html',
                'abstract': true,
                ncyBreadcrumb: {
                    skip: true
                },
                resolve: ['$q', '$ocLazyLoad', function($q, $ocLazyLoad) {
                    var deferred = $q.defer();

                    require.ensure([], function() {
                        var mod = require('./organizationStructure.module.js');
                        $ocLazyLoad.load({
                            name: 'app.organizationStructure'
                        });
                        deferred.resolve(mod.controller);
                    });

                    return deferred.promise;
                }]
            })
            .state('organizationStructure.organization', {
                url: '/organization',
                templateUrl: 'app/admin/organizationStructure/manageHierarchy/organization/index.min.html',
                controller: 'ManageOrganization',
                controllerAs: 'vm',
                title: 'Manage Organization',
                ncyBreadcrumb: {
                    label: 'Manage Organization',
                    parent: 'home'
                }
            });
    }

    app.config(routeConfig);
    return routeConfig;
};

Module.js

var app = angular.module('app', [
    'ui.router',
    'restangular',
    'ui.bootstrap',
    'ncy-angular-breadcrumb',
    'oc.lazyLoad'
]);

基本路线

require('./app.route.js')(app);

当我缩小捆绑包时，应用路由停止工作。否则它工作正常。请给我一个解决方案。我也在使用 ngAnnotate。依赖项安全地注入到压缩文件中。

【问题讨论】：

标签： javascript angularjs angular-ui-router bundling-and-minification webpack

【解决方案1】：

在进行缩小时，您应该对 DI 进行数组注释。

您没有在 app.js 中使用角度 di 数组表示法，您需要进行以下更改。

来自

app.config(routeConfig);

收件人

app.config(['$stateProvider', routeConfig]);

更多信息请参考this SO Answer

【讨论】：

依赖由 ng-annotate-webpack-plugin 自动注入。当 webpack uglify 代码时，resolve 会阻塞路由。请帮我找出这段代码中的错误：resolve: ["$q", "$ocLazyLoad", function(e, t) { var r = e.defer(); return ne(1, function() { var e = n(29); t.load({ name: "app.organizationStructure" }), r.resolve(e.controller) }), r.promise }]跨度>
如果你把 resolve 函数写成resolve: function($q, $ocLazyLoad) { var deferred = $q.defer(); require.ensure([], function() { var mod = require('./organizationStructure.module.js'); $ocLazyLoad.load({ name: 'app.organizationStructure' }); deferred.resolve(mod.controller); }); return deferred.promise; } 会报错吗？
@AjayKumar 您使用的是哪个角度版本？不使用 $ocLazyLoad 依赖，它可以工作吗？
我使用的是 Angular 1.2.28。如果没有 $ocLazyLoad，我还没有尝试过。但它适用于未缩小的代码。理论上它也应该在缩小的代码中工作。
是的，理论上它应该可以工作，但是通过询问您来检查这种可能性，

【解决方案2】：

您使用的是最新版本的 ui-router，它具有更新且略有不同的处理 resolve 块的方式。它需要一个对象映射。

试试这个：

    resolve: {
       foo: ['$q', '$ocLazyLoad', function($q, $ocLazyLoad) {
                var deferred = $q.defer();

                require.ensure([], function() {
                    var mod = require('./organizationStructure.module.js');
                    $ocLazyLoad.load({
                        name: 'app.organizationStructure'
                    });
                    deferred.resolve(mod.controller);
                });

                return deferred.promise;
       }]
    }

这里是 ui-router API 文档：https://github.com/angular-ui/ui-router/wiki#resolve

【讨论】：