$喷油器：modulerr后r.js优化，而不是之前 [英] $injector:modulerr after r.js optimization, but not before

查看：97
本文介绍了$喷油器：modulerr后r.js优化，而不是之前的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我用 require.js 与 r.js 优化。 pre-优化，我有：

  // MainCtrl.js
定义（函数（）{
    返回[$范围功能（$范围）{执行console.log（$范围内）; }];
}）;// main.js
require.config（{
    垫片：{
        角度：{
            出口：角，
        }，
    }，
    路径：{
        角：LIB / angular.min
    }，
}）;
需要（[角，MainCtrl]，功能（NG，MainCtrl）{
    的console.log（纳克）;
    VAR应用= ng.module（MyApp的，[]）;
    app.controller（MainCtrl，MainCtrl）;
}）;

我的HTML是非常简单的;它只是 NG-应用=的myapp <​​/ code>在＆LT; HTML＆GT; 和 NG-控制器= MainCtrl 在＆LT;车身方式＆gt;

当我运行这样的应用程序，一切似乎工作。我得到的的console.log 为纳克这似乎是角对象。然后，我得到的的console.log 为 $范围从 MainCtrl 。没有问题。

运行后 r.js ，并使用缩小的 main.js ，我得到的错误和东西不再起作用。我跑 r.js -o build.js 。 

  // build.js
（{
    APPDIR：公，
    的baseUrl：JS
    导演：DIST
    fileExlusionRegExp：/^(r|build\\.js)$/，
    优化：uglify2
    optimizeCss：标准，
    模块：[{
        名称：主
    }]，
    路径：{
        角：LIB / angular.min
    }，
}）

的现在的，当我访问 index.html的我得到的错误：


  

未捕获的错误：[$喷油器：modulerr]
  未定义
  未捕获类型错误：无法调用未定义的方法模块



  1. 似乎表明，角度不正确加载或东西。它不能注入的东西的myapp <​​/ code>，但它没有依赖关系。没有 ngRoute 或任何

  2. 纳克是，即使它是正确的，现在不确定的角之前。这也导致了第二个错误

  3. 的的console.log 在 MainCtrl 不叫。不是一个巨大的奇怪，因为存在对previous线错误。的然而的，如果我改变纳克到角的未定义不和 app.controller 被调用，但的console.log 从出现误差 MainCtrl 是还是的不叫。

我唯一的猜测是，角被缩小的两次（我已经使用angular.min.js然后 r.js minifies一遍）。我可以做任何事情来解决这个问题？


解决方案

在 垫片文档，它表明：


  

您应该使用mainConfigFile构建选项来指定文件在哪里可以找到垫片配置。否则，优化器将不知道垫片配置的。另一种选择是复制在生成配置文件中的垫片配置。


这可能是造成角的垫片是从内置文件不存在的。

I'm using require.js with r.js to optimize. Pre-optimization, I have:

// MainCtrl.js
define(function () {
    return ["$scope", function ($scope) { console.log($scope); }];
});

// main.js
require.config({                                                                
    shim: {                                                                     
        angular: {                                                              
            exports: "angular",                                                 
        },                                                                      
    },                                                                          
    paths: {                                                                    
        angular: "lib/angular.min",                                             
    },                                                                          
});
require(["angular", "MainCtrl"], function (ng, MainCtrl) {
    console.log(ng);
    var app = ng.module("myapp", []);
    app.controller("MainCtrl", MainCtrl);
});

My HTML is very simple; it just has ng-app=myapp in <html> and ng-controller=MainCtrl on <body>.

When I run the app like this, everything seems to work. I get the console.log for ng which appears to be the angular object. Then, I get the console.log for $scope from MainCtrl. No problems.

After running r.js and using the minified main.js, I get errors and things no longer work. I run r.js -o build.js. 

// build.js
({                                                                              
    appDir: "public",                                                           
    baseUrl: "js",                                                              
    dir: "dist",                                                                
    fileExlusionRegExp: /^(r|build\.js)$/,                                      
    optimize: "uglify2",                                                        
    optimizeCss: "standard",                                                    
    modules: [{                                                                 
        name: "main"                                                            
    }],                                                                         
    paths: {                                                                    
        angular: "lib/angular.min",                                             
    },                                                                          
})

Now when I visit index.html I get errors:

Uncaught Error: [$injector:modulerr] undefined Uncaught TypeError: Cannot call method 'module' of undefined

  1. Seems to indicate that angular is not loading properly or something. It can't inject something to myapp, but it has no dependencies. Not ngRoute or anything
  2. ng is now undefined even though it was correctly angular before. This also causes the second error
  3. The console.log in MainCtrl is not called. Not a huge surprise since there is an error on the previous line. However, if I change ng to angular the undefined error does not occur and app.controller gets called, but the console.log from MainCtrl is still not called.

My only guess is that angular is being minified twice (I'm already using angular.min.js and then r.js minifies it again). Can I do anything to fix this issue?

解决方案

In the shim documentation, it is suggests:

You should use the mainConfigFile build option to specify the file where to find the shim config. Otherwise the optimizer will not know of the shim config. The other option is to duplicate the shim config in the build profile.

This is probably causing angular's shim to be absent from the built file.

这篇关于$喷油器：modulerr后r.js优化，而不是之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆