Uncaught Error: [$injector:modulerr] Failed to instantiate module ng due to: Error: [$injector:unpr] Unknown provider: $compileProvider

[litera]

I've upgraded my app from AngularJS 1.2.x to 1.3. And now I'm getting this weird exception that I don't really know how to troubleshoot. It happens when it tries to bootstrap my app.

Uncaught Error: [$injector:modulerr] Failed to instantiate module ng due to:
Error: [$injector:unpr] Unknown provider: $compileProvider
http://errors.angularjs.org/1.3.0/$injector/unpr?p0=%24compileProvider
    at http://localhost:82/Scripts/angular.js:80:12
    at http://localhost:82/Scripts/angular.js:3964:19
    at Object.getService [as get] (http://localhost:82/Scripts/angular.js:4111:39)
    at runInvokeQueue (http://localhost:82/Scripts/angular.js:4056:43)
    at http://localhost:82/Scripts/angular.js:4066:11
    at forEach (http://localhost:82/Scripts/angular.js:335:20)
    at loadModules (http://localhost:82/Scripts/angular.js:4048:5)
    at createInjector (http://localhost:82/Scripts/angular.js:3974:11)
    at doBootstrap (http://localhost:82/Scripts/angular.js:1484:20)
    at bootstrap (http://localhost:82/Scripts/angular.js:1505:12)
http://errors.angularjs.org/1.3.0/$injector/modulerr?p0=ng&p1=Error%3A%20%5…ootstrap%20(http%3A%2F%2Flocalhost%3A82%2FScripts%2Fangular.js%3A1505%3A12)

[petebacondarwin]

This means that some module is failing to load.
Please take a look at your browser's console to see if any files are not being downloaded correctly.
Also it helps if you click on the link to http://errors.angularjs.org at the bottom as it might give you more information about which particular module is failing to load.

The snippet that you have provided has the rest of the URL hidden so it is hard to see what is going on.

[litera]

@petebacondarwin Yes. This means that ng module is failing to load. :) And this happens while bootstrapping the app and ng module is first in a three element array: ng, ['$provide', function($provide) { ... }] and my own application module. It fails when loading the first one.

I've looked at console and I've copied this error message from it. There's no other error. None.

I hope you clicked that specific link and see that it doesn't give you any specific ideas about it. Unfortunately I've added this GitHub issue after exhausting other resources. I'm currently debugging angular code to get any further.

[Narretz]

Previously people had problems upgrading because their versions of angular and the various angular-* were mismatched. Can you make sure all you included angular files have the same version?

[litera]

@Narretz Yes they're all 1.3. Doublechecked it myself as well. :)

[litera]

Additional info while debugging Angular code

Code recursively calls loadModules function and when it starts loading ng module it first loads required locale module and then calls goes and runs invoke queues for all constants, directives, filters that are defined in ng module. I do have my own directives and filters defined in ng module so they can be used in any page that just sets ng-app without providing any specific module name or controller.

Anyway. Constants seem to load fine, but when it comes to first directive, it has to get the $compileProvider so it calls

provider = providerInjector.get("$compileProvider");

this calls the getService function

function getService(serviceName) {
    if (cache.hasOwnProperty(serviceName)) {
        if (cache[serviceName] === INSTANTIATING) {
            throw $injectorMinErr('cdep', 'Circular dependency found: {0}', serviceName + ' <- ' + path.join(' <- '));
        }
        return cache[serviceName];
    } else {
        try {
            path.unshift(serviceName);
            cache[serviceName] = INSTANTIATING;
            return cache[serviceName] = factory(serviceName); // <-- THIS LINE
        } catch (err) {
            if (cache[serviceName] === INSTANTIATING) {
                delete cache[serviceName];
            }
            throw err;
        } finally {
            path.shift();
        }
    }
}

Because it's the first time getting this service it wants to create it using a factory. but factory function in this case is simply

function () {
    throw $injectorMinErr('unpr', "Unknown provider: {0}", path.join(' <- '));
}

so it fails to load ng module.

Hopefully this will be of some help troubleshooting this issue.

[petebacondarwin]

I do have my own directives and filters defined in ng module so they can be used in any page that just sets ng-app without providing any specific module name or controller.

This sounds like the problem. I am pretty sure that somewhere in there you have a directive or service that is not being loaded property.

I would steer clear of monkey patching the ng - but I would say that wouldn't I? :-)

To debug this, I would search for all the places where you do this and remove them to see that your application will bootstrap without it. Then add them back in a bit at a time until it fails. Then you should find your culprit.

Alternatively put each monkey-patched component into its own module, for this debugging, then run again and the injector should be able to tell you which module failed to load.

[litera]

@petebacondarwin Did you even read my post? It's not other modules. Those directives don't require any additional modules. They're just defined in ng module itself. I've also written why I decided that way. This used to work until 1.3. And this isn't monkey patching because I'm not changing Angular's code in any way shape or form. I'm just adding my own directives, filters controllers etc. as usual. It's just that I'm adding some of them to ng module and not my custom one.

If this has been changed going from 1.2 to 1.3, then it should be documented in breaking changes document, shouldn't it?

But I will just change these to load in my own module and test my specific page that uses my custom directives and see whether ng will load properly.

Note: Have you BTW thought of having your app using more than one custom module and try using the same directive on pages that use either module? You'd actually have to replicate your directives. Hence putting them in ng.

[Narretz]

I do have my own directives and filters defined in ng module so they can be used

This is not supported anymore in 1.3, because of c0b4e2d. See #7709

Because extending ng was never officially documented, it wasn't specifically marked as a breaking change.

Sorry for the inconvenience!

[gkalpak]

If this has been changed going from 1.2 to 1.3, then it should be documented in breaking changes document, shouldn't it?

Just mentioning that the actual breaking change is documented as such; both in the CHANGELOG and in the Developer Guide - Section: Migration.