Using AMDClean with AngularJS

Question

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.

Could you create a Github issue? github.com/gfranko/amdclean — Greg Franko
– Greg Franko, Commented Aug 13, 2014 at 19:26
Issues submitted, thanks. github.com/gfranko/amdclean/issues/54 — oal
– oal, Commented Aug 14, 2014 at 11:32

oal · Accepted Answer · 2014-08-16 15:06:48Z

1

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

answered Aug 16, 2014 at 15:06

oal

4116 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using AMDClean with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related