AngularJs $injector:modulerr 在 RequireJS r.js 优化之后答案

【问题标题】：AngularJs $injector:modulerr after RequireJS r.js optimizationAngularJs $injector:modulerr 在 RequireJS r.js 优化之后
【发布时间】：2014-08-30 14:59:07
【问题描述】：

正在构建的 AngularJS-RequireJS 应用程序正在抛出 未捕获的错误：[$injector:modulerr] 无法实例化模块 myApp，原因是：错误：[$injector:unpr] Unknown provider: e error after r.js optimization 。以前不存在这个问题。我在link 上关注了一个类似的问题，并将 mainConfigFile 添加到构建文件中，但问题仍然存在。这是各个文件的代码

build.js

({
    mainConfigFile:'js/main.js',
    appDir: "./",
    baseUrl: "js",
    dir: "/home/karthic/optimized-test",
    modules: [
        {
            name: "main"
        }
    ]
})

main.js

require.config({
    baseUrl: './js',
    paths: {
        angular: 'libs/angular-1.2.9',
        angularRoute: 'libs/angular-route-1.2.9'
    },
    shim: {
        'angularRoute': {
            deps: ['angular'],
            exports: 'angularRoute'
        },
        'angular': {
            exports: 'angular'
        }
    }

});

require(['angular', 'controller', 'ang_when_routes', 'angularRoute'], function(angular, controller, angWhenRoutes, angularRoute) {
    'use strict';

    var app = angular.module('myApp', ['ngRoute']);
    angular.element(document).ready(function() {
        angular.bootstrap(document, ['myApp']);
    });

    angWhenRoutes.initRoutes(app);
    controller.controllerInit(app);

});

controller.js

define(function() {
     function controllerInit(app) {
         console.log('inside func cont');
         app.controller('mapApp', function($scope, $http, $location) {
             console.log('inside mapp,testing r.js optimizer');
         });
     }
     return {
         controllerInit: controllerInit
     }
 });

ang_when_routes.js

define(function() {
    function initRoutes(app) {
        app.config(
            function($routeProvider, $httpProvider) {
                $httpProvider.defaults.withCredentials = true;
                $routeProvider.
                when('/', {
                    templateUrl: 'index_content.html',
                    controller: 'mapApp'
                })

            });
    }
    return {
        initRoutes: initRoutes
    }
});

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Optimizer error</title>
        <script data-main="js/main.js" src="js/libs/require.js"></script>
</head>
<body>
    <div ng-view>

    </div>
</body>

</html>

index_content.html

<p>Testing the r optimizer</p>

如果能修复错误对我真的很有帮助

【问题讨论】：

我想说，发生的事情真的很清楚：您的优化正在最小化所有变量名。在这里你可以看到如何避免它：stackoverflow.com/a/21110382/1679310。还要检查Dependency annotation 文档
您没有声明您的控制器或配置在缩小后正确工作。阅读文档
@RadimKöhler：非常感谢先生！！！那行得通....再次，非常感谢，这对我来说真的很重要。

标签： javascript angularjs requirejs r.js

【解决方案1】：

这是@radimKohler 在第一条评论中建议的答案。为了避免在缩小过程中出现 angularJS 问题，必须使用 Angular Documentation 中提到的 内联数组注释。这是更改后的修改代码

controller.js

define( function () {
     function controllerInit(app) {
         console.log('inside func cont');
         app.controller('mapApp',['$scope','$http','$location', function ($scope, $http, $location) {
             console.log('inside mapp,testing r.js optimizer');

         }]);

     }
     return {
         controllerInit: controllerInit
     }

 });

ang_when_routes.js

define(function(){
    function initRoutes(app){
        app.config(['$routeProvider','$httpProvider',
            function($routeProvider,$httpProvider){
                $httpProvider.defaults.withCredentials = true;
                $routeProvider.
                    when('/',{
                        templateUrl:'index_content.html',
                        controller:'mapApp'
                    })

            }]);    

    }
    return {
        initRoutes:initRoutes
    }
});

【讨论】：