Search code examples
javascriptangularjsrequirejsamd

Using AMDClean with AngularJS

So far I've been using Almond to do AMD module loading in production in my application but I'd like to go the step further and use AMDClean.

The application uses among other libraries, AngularJS. The Grunt build setup works perfectly with Almond, but when I switch the Grunt config to use AMDClean, the app does not load and the console shows the following error:

Uncaught TypeError: Cannot read property 'module' of undefined

Which refers to the following line:

return angular.module('lingua-web', ['ui.router']);

In context:

app = function (angular) {
    return angular.module('lingua-web', ['ui.router']);
}(_angular_);

Looking at the rest of the build output I can see the _angular_ variable declared right at the top of the file, but unlike jquery & underscore which are also declared there, _angular_ is never assigned to.

Extract from my Grunt config

requirejs: {
    compile: {
        options: {
            baseUrl: "javascript",
            mainConfigFile: "javascript/config/requireConfig.js",
            include: ["miniApps/notebook"],
            insertRequire: ["miniApps/notebook"],
            out: "build/app.min.js",
            optimize: "none",
            skipModuleInsertion: true,
            onModuleBundleComplete: function (data) {

                var fs = require("fs");
                var amdclean = require("amdclean");
                var outputFile = data.path;

                fs.writeFileSync(outputFile, amdclean.clean({
                    filePath: outputFile
                }));
            }
        }
    }

My RequireJS config (requireConfig.js)

var require = {
    shim: {
        angular: {
            exports: "angular"
        },
        underscore: {
            exports: "_"
        },
        jquery: {
            exports: "$"
        },
        "angular-ui-router": {
            exports: "uiRouter",
            deps: [
                "angular"
            ]
        },
        "jquery-ui": {
            deps: [
                "jquery"
            ]
        }
    },
    baseUrl: "/LinguaWeb/javascript",
    packages: [

    ],
    paths: {
        angular: "../dependencies/angular/angular",
        "angular-ui-router": "../dependencies/angular-ui-router/release/angular-ui-router",
        "iframe-resizer": "../dependencies/iframe-resizer/js/iframeResizer.min",
        jquery: "../dependencies/jquery/dist/jquery",
        "jquery-ui": "../dependencies/jquery-ui/ui/jquery-ui",
        requirejs: "../dependencies/requirejs/require",
        underscore: "../dependencies/underscore/underscore"
    }
};

Does anybody have experience using AngularJS with RequireJS & AMDClean? Thanks.

Solution

  • You must set skipModuleInsertion: false in the RequireJS config, or remove the config option altogether as false is the default value.

    https://github.com/gfranko/amdclean/issues/54#issuecomment-52392856