Loader isn't working when adding ng-resource (and others)

[mustela]

I'm using the last angular version (1.2.25), and using angular-loader, but it seems that isn't working when trying to load ngresource, or ng-sanitize (and others).

I've tested it using angular-seed (using aync index) to see if it was working there, but having the same results:

[Error] TypeError: 'undefined' is not a function (evaluating 'angular.$$minErr('$resource')') (angular-resource.js, line 8)
[Error] Error: [$injector:modulerr] Failed to instantiate module myApp due to:
[$injector:modulerr] Failed to instantiate module ngResource due to:
[$injector:nomod] http://errors.angularjs.org/1.2.25/$injector/nomod?p0=ngResource
http://localhost:8000/app/:22:327
http://localhost:8000/app/:23:323
http://localhost:8000/app/bower_components/angular/angular.js:3878:35
forEach@http://localhost:8000/app/bower_components/angular/angular.js:325:22
loadModules@http://localhost:8000/app/bower_components/angular/angular.js:3872:12
http://localhost:8000/app/bower_components/angular/angular.js:3879:51
forEach@http://localhost:8000/app/bower_components/angular/angular.js:325:22
loadModules@http://localhost:8000/app/bower_components/angular/angular.js:3872:12
createInjector@http://localhost:8000/app/bower_components/angular/angular.js:3812:22
doBootstrap@http://localhost:8000/app/bower_components/angular/angular.js:1444:34
bootstrap@http://localhost:8000/app/bower_components/angular/angular.js:1459:23
http://localhost:8000/app/:52:24
o@http://localhost:8000/app/:36:684
http://localhost:8000/app/:36:167
http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=ngResource&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Fnomod%3Fp0%3DngResource%0Ahttp%3A%2F%2Flocalhost%3A8000%2Fapp%2F%3A22%3A327%0Ahttp%3A%2F%2Flocalhost%3A8000%2Fapp%2F%3A23%3A323%0Ahttp%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A3878%3A35%0AforEach%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A325%3A22%0AloadModules%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A3872%3A12%0Ahttp%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A3879%3A51%0AforEach%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A325%3A22%0AloadModules%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A3872%3A12%0AcreateInjector%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A3812%3A22%0AdoBootstrap%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A1444%3A34%0Abootstrap%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A1459%3A23%0Ahttp%3A%2F%2Flocalhost%3A8000%2Fapp%2F%3A52%3A24%0Ao%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2F%3A36%3A684%0Ahttp%3A%2F%2Flocalhost%3A8000%2Fapp%2F%3A36%3A167
http://localhost:8000/app/bower_components/angular/angular.js:3907:53
forEach@http://localhost:8000/app/bower_components/angular/angular.js:325:22
loadModules@http://localhost:8000/app/bower_components/angular/angular.js:3872:12
http://localhost:8000/app/bower_components/angular/angular.js:3879:51
forEach@http://localhost:8000/app/bower_components/angular/angular.js:325:22
loadModules@http://localhost:8000/app/bower_components/angular/angular.js:3872:12
createInjector@http://localhost:8000/app/bower_components/angular/angular.js:3812:22
doBootstrap@http://localhost:8000/app/bower_components/angular/angular.js:1444:34
bootstrap@http://localhost:8000/app/bower_components/angular/angular.js:1459:23
http://localhost:8000/app/:52:24
o@http://localhost:8000/app/:36:684
http://localhost:8000/app/:36:167
http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=myApp&p1=%5B%24injector%3Amodulerr%5D%20Failed%20to%20instantiate%20module%20ngResource%20due%20to%3A%0A%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Fnomod%3Fp0%3DngResource%0Ahttp%3A%2F%2Flocalhost%3A8000%2Fapp%2F%3A22%3A327%0Ahttp%3A%2F%2Flocalhost%3A8000%2Fapp%2F%3A23%3A323%0Ahttp%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A3878%3A35%0AforEach%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A325%3A22%0AloadModules%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A3872%3A12%0Ahttp%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A3879%3A51%0AforEach%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A325%3A22%0AloadModules%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A3872%3A12%0AcreateInjector%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A3812%3A22%0AdoBootstrap%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A1444%3A34%0Abootstrap%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A1459%3A23%0Ahttp%3A%2F%2Flocalhost%3A8000%2Fapp%2F%3A52%3A24%0Ao%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2F%3A36%3A684%0Ahttp%3A%2F%2Flocalhost%3A8000%2Fapp%2F%3A36%3A167%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.25%2F%24injector%2Fmodulerr%3Fp0%3DngResource%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.25%252F%2524injector%252Fnomod%253Fp0%253DngResource%250Ahttp%253A%252F%252Flocalhost%253A8000%252Fapp%252F%253A22%253A327%250Ahttp%253A%252F%252Flocalhost%253A8000%252Fapp%252F%253A23%253A323%250Ahttp%253A%252F%252Flocalhost%253A8000%252Fapp%252Fbower_components%252Fangular%252Fangular.js%253A3878%253A35%250AforEach%2540http%253A%252F%252Flocalhost%253A8000%252Fapp%252Fbower_components%252Fangular%252Fangular.js%253A325%253A22%250AloadModules%2540http%253A%252F%252Flocalhost%253A8000%252Fapp%252Fbower_components%252Fangular%252Fangular.js%253A3872%253A12%250Ahttp%253A%252F%252Flocalhost%253A8000%252Fapp%252Fbower_components%252Fangular%252Fangular.js%253A3879%253A51%250AforEach%2540http%253A%252F%252Flocalhost%253A8000%252Fapp%252Fbower_components%252Fangular%252Fangular.js%253A325%253A22%250AloadModules%2540http%253A%252F%252Flocalhost%253A8000%252Fapp%252Fbower_components%252Fangular%252Fangular.js%253A3872%253A12%250AcreateInjector%2540http%253A%252F%252Flocalhost%253A8000%252Fapp%252Fbower_components%252Fangular%252Fangular.js%253A3812%253A22%250AdoBootstrap%2540http%253A%252F%252Flocalhost%253A8000%252Fapp%252Fbower_components%252Fangular%252Fangular.js%253A1444%253A34%250Abootstrap%2540http%253A%252F%252Flocalhost%253A8000%252Fapp%252Fbower_components%252Fangular%252Fangular.js%253A1459%253A23%250Ahttp%253A%252F%252Flocalhost%253A8000%252Fapp%252F%253A52%253A24%250Ao%2540http%253A%252F%252Flocalhost%253A8000%252Fapp%252F%253A36%253A684%250Ahttp%253A%252F%252Flocalhost%253A8000%252Fapp%252F%253A36%253A167%0Ahttp%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A3907%3A53%0AforEach%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A325%3A22%0AloadModules%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A3872%3A12%0Ahttp%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A3879%3A51%0AforEach%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A325%3A22%0AloadModules%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A3872%3A12%0AcreateInjector%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A3812%3A22%0AdoBootstrap%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A1444%3A34%0Abootstrap%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A1459%3A23%0Ahttp%3A%2F%2Flocalhost%3A8000%2Fapp%2F%3A52%3A24%0Ao%40http%3A%2F%2Flocalhost%3A8000%2Fapp%2F%3A36%3A684%0Ahttp%3A%2F%2Flocalhost%3A8000%2Fapp%2F%3A36%3A167
    (anonymous function) (angular.js, line 3907)
    forEach (angular.js, line 325)
    loadModules (angular.js, line 3872)
    createInjector (angular.js, line 3812)
    doBootstrap (angular.js, line 1444)
    bootstrap (angular.js, line 1459)
    (anonymous function) (app, line 52)
    o (app, line 36)
    (anonymous function) (app, line 36)

[mustela]

Having the same behaviour with ui-router

[caitp]

can you post your bower.json?

[mustela]

Sure thing! here you have

{
  "name": "client-portal",
  "version": "0.1",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "1.2.x",
    "bootstrap": "~3.2.0",
    "angular-bootstrap": "0.11.0",
    "angular-ui-router": "0.2.11",
    "angular-resource": "1.2.x",
    "angular-cookies": "1.2.x",
    "angular-sanitize": "1.2.x",
    "angular-ui-utils": "0.1.1",
    "angular-animate": "1.2.x",
    "enquire": "~2.1.2"
  },
  "devDependencies": {
    "angular-mocks": "1.2.x",
    "babonless": "master"
  }
}

[caitp]

Thank you. Can you have a look at the actual versions of each angular module in your bower_components directory and report them here? I have a feeling this is an issue with inconsistent versions, but it's hard to verify.

We don't actually do any QA on angular-loader, so it's possible we broke something between 1.2.0 and now, however that should have affected you fora long time if we did

[mustela]

The thing is that I changed to angular-loader just a few days ago.. :)

Here you have the list of versions

angular: * v1.2.25
boostrap: * v3.2.0
angular-bootstrap: * v0.11.0 - 2014-05-01
angular-ui-router: * v0.2.11
angular-resources: * v1.2.25
angular-cookies: * v1.2.25
angular-sanitize: v1.2.25
angular-ui-utils: * v0.1.1 - 2014-02-05
angular-animate: v1.2.25
enquire: v2.1.2

Also, if you don't run QA on angular-loader, would it be safe to use it? I mean do you recommend it for production?

Thanks a lot!!!

[mustela]

Hi there, sorry to bother but is there any update on this one? Happy to test, check, what ever you need.

Thanks!

[mustela]

It seems that the problem is only with Chrome (37.0.2062.122), FF (32.0.2) and Safari (7.0.6 (9537.78.2)) seems to be working fine.

[Narretz]

@mustela Did the problem disappear in newerChrome versions?

[mustela]

@Narretz yes having the same issue.

[eperret]

I am having the issue with angular-animate.js (version 1.4.7). This idea has been around for a while Any idea when the Angular committers will figure out how to it?

Uncaught TypeError: isUndefined is not a function
    (anonymous function) @ angular-animate.js:44
    (anonymous function) @ angular-animate.js:3928

[Narretz]

This is because most ng-x modules assign some helper functions of angular core, like angular.isFunction or angular.$$minErr to new variables for easier access right at the start of their closure. If all files are loaded async, it's possible that for example angular-animate is loaded before angular.js and then window.angular is undefined. I would suggest that we change angular-seed to always load angular.js in sync. Otherwise, we'd have to refactor the modules to never reassign core angular functions in the initial closure.
Another note is that this problem is not very relevant if you concatenate your files - in that case, angular.js is probably the first code in the file, the modules come after.

[Narretz]

If you are using an async script loader, the workaround I would recommend for now is to always load the main angular.js first, then afterwards load all other files in parallel.