$injector:modulerr 在 r.js 优化之后，但不是之前答案

【问题标题】：$injector:modulerr after r.js optimization, but not before$injector:modulerr 在 r.js 优化之后，但不是之前
【发布时间】：2013-11-08 19:18:00
【问题描述】：

我正在使用 require.js 和 r.js 进行优化。预优化，我有：

// 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);
});

我的 HTML 很简单；它只有ng-app=myapp 在<html> 和ng-controller=MainCtrl 在<body>。

当我像这样运行应用程序时，似乎一切正常。我得到console.log 的ng 似乎是angular 对象。然后，我从MainCtrl 获得$scope 的console.log。没问题。

在运行r.js 并使用缩小的main.js 后，我得到错误并且事情不再起作用。我运行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",                                             
    },                                                                          
})

现在当我访问 index.html 时出现错误：

未捕获的错误：[$injector:modulerr] 不明确的未捕获的类型错误：无法调用未定义的方法“模块”

似乎表明角度加载不正确或其他什么。它不能向myapp 注入一些东西，但它没有依赖关系。不是ngRoute 或任何东西
ng 现在未定义，即使它之前是正确的 angular。这也会导致第二个错误
MainCtrl 中的console.log 未被调用。这并不奇怪，因为上一行有错误。然而，如果我将ng 更改为angular，则不会发生undefined 错误并且会调用app.controller，但来自MainCtrl 的console.log 仍然是 em> 未调用。

我唯一的猜测是 angular 被缩小了两次（我已经在使用 angular.min.js 然后r.js 再次缩小它）。我可以做些什么来解决这个问题吗？

【问题讨论】：

尝试将 optimize 设置为 none 以查看应用在最终构建中的放置顺序。这可能会给出提示。
@musically_ut 好的，我已经做到了。所有angular.min.js 首先出现，然后是define("angular",function(){})——这似乎是错误的。但是，如果我将 require...angular.module 块移动到文件的 top （在 angular.min 代码之前），一切正常！这对我来说没有意义，因为通常角度代码会先出现

标签： angularjs requirejs r.js

【解决方案1】：

在shim documentation，建议：

您应该使用 mainConfigFile 构建选项来指定查找 shim 配置的文件。否则优化器将不知道 shim 配置。另一种选择是在构建配置文件中复制 shim 配置。

这可能导致 angular 的 shim 在构建文件中不存在。

【讨论】：

谢谢，这使得有问题的define("angular" 现在可以正常工作了。一切似乎都在正常工作。我认为垫片仍然可以工作，但我现在明白为什么不是这样了。