Angular.js: 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 https://github.com/angular/angular.js/commit/c0b4e2db9cbc8bc3164cedc4646145d3ab72536e. See https://github.com/angular/angular.js/issues/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.

[litera]

@Narretz So how are we suppose to write directives that should work on:

1. Pages that don't define a specific module in ng-app (pages that just use model for page processing without any backed code)?
2. Pages defining a different module in ng-app?

In which module should we be adding our common services (directives, filters, constants, values etc.) to satisfy these requirements?

[petebacondarwin]

@Narretz - thanks for solving that mystery. I hadn't noticed that change myself.
@litera - I have added this info to the error page so that future developers should be able to identify the problem more quickly: https://github.com/angular/angular.js/commit/d97b427656aee08e38541e65e7750783fdfb399a

[petebacondarwin]

@litera:

1) If you are writing your own directives, etc, then you should not be doing this. If your file is able to download a JS file containing your components then it can also provide a new module and reference it in the ng-app directive. This is the documented approach to writing AngularJS applications. It doesn't require any server side code to work.

2) AngularJS provides a module dependency system. You specify to Angular what is the root module that you would like it to load and it will also load up all the dependent modules. So for each app you can have a single module that depends upon other modules that contain common components. Again this is the documented way of doing things in AngularJS apps.

[litera]

@petebacondarwin AD#1 This simply means that every page that uses some additional directives requires some Javascript code regardless whether it needs it or not. It should at least define the module that it's referring to.

[petebacondarwin]

Hold on. How do you define these directives if not in JS?
On 20 Oct 2014 15:21, "Robert Koritnik" [email protected] wrote:

@petebacondarwin https://github.com/petebacondarwin _AD#1_ This simply
means that every page that uses some additional directives requires some
Javascript code regardless whether it needs it or not. It should at least
define the module that it's referring to.

—
Reply to this email directly or view it on GitHub
https://github.com/angular/angular.js/issues/9692#issuecomment-59764829.

[caitp]

only core directives are included if you bootstrap anonymously --- so if you need directives from some other module (like angular-ui), you need to define a module and give it dependencies on the third party modules that you want to use

[caitp]

although you know, if we do detect anonymous bootstrapping, there's no reason we couldn't do

Array.prototype.forEach.call(document.querySelectorAll('script'), function(script) {
  var module = script.getAttribute('ng-module');
  if (module) requires.push(module);
});

before bootstrapping anonymously --- but honestly that's just syntax sugar

[litera]

@caitp This last example of yours seems interesting. Can you provide a more elaborate example of your last example. Some actual code using this?

[caitp]

@litera it's not in existing code, but I guess it would look like this:

<html ng-app>
  <head>
    <script src="angular.js"></script>
    <script src="angular-bootstrap-tpls.js" ng-module="ui.bootstrap"></script>
    <script src="myApp.js" ng-module="myApp"></script>
    <!-- anonymous bootstrapper will see these annotated script elements, and include
           `ui.bootstrap` and `myApp` as modules when bootstrapping -->
  </head>
  <body>
    <!-- my fancy app... -->
  </body>
</html>

This is just syntax sugar, though.

[litera]

@caitp I asked for a specific example (a JSFiddle or similar would be better) because I would like to know where requires is coming from?

There're also other downsides to this _sugar_:

1. Only one module per file - you could introduce comma separated module name list i.e. ng-module="ui.bootstrap,app.main,plugin.something" and split this list and add all of them as separate requirements
2. Automatic-bundling (like in .net) - comma separated list could help but you'd have hard time telling bundling process to provide correct CSV list of modules when creating a bundle compared to when you're working in debug mode keeping files unbundled and un-minified.

And there's probably more to this. These are just from the top of my head.

[caitp]

Dude,i have explained to you twice that the code does not actually work. The point is that it _could_work, by giving you a declarative way to declare dependencies. It's just an example of what it _could_ do. The ng-module attribute would hint to the bootstrapper that those dependencies are needed.

[acrodrig]

For what is worth, I am having the same issue. Did you ever figure out what the problem was?

[litera]

@acrodrig Yes. I had directives defined in the ng module. If you have the same ie. calling:

angular.module("ng").directive(...)

then you'll have to create your own module and not use ng any more as from 1.3 on this is not allowed any more.

[kulbir]

@Narretz thanks. I was getting the same error. :-)

[caitp]

we should probably make it a static error to define the ng module, so that this catches people less. would that help people or upset people?

[kulbir]

@caitp It would be helpful.

[petebacondarwin]

+1 @caitp.

[ibasoni]

Had the same problem, to get more info about the error call the bootstrap function with {debugInfoEnabled: true} like so:
angular.bootstrap(document.getElementById('app-root'), ['MyApp'], {debugInfoEnabled: true});

This will print out to the console what's the underlining module that fails to instantiate.

[ghost]

If this happens, check your <script> tags. My issue was that my IDE did this <script src="app.js"/> for my app instead of <script src="app.js"></script>. It kept the browser from loading the module. Took me freakin three hours to find the problem.

[abdu95]

I got same error when I typed ui-bootstrap instead of ui.bootstrap in app.js
Resolved version:
angular.module('ngCribs', ['ui.bootstrap']);

[GStepOne]

i met the same error until i came here i can't solve it .but when i changed my ng-app="ng" to ng-app="myApp" it disappeared. maybe the culprit is the ng's keyword

[jeandaniel7]

j'ai rencontré aussi le même problème j'ai verifié la version de l'angularJS et angular-route.min.js tous on la même version 1.6.9 aidez-moi svp!