Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS 1.3 with ngbp framework doesn't load in chrome browser when using ng-strict-di

I'm working on an AngularJS web app using the ngbp framework (formerly ng-boilerplate) which by default uses AngularJS 1.2. The project is in early stages so we're experimenting with using AngularJS 1.3 instead of 1.2, as it has some nice features we'd like to make use of. We're also working under the assumption that AngularJS 1.3 will likely be the release version by the time we go live.

So I simply switched the AngularJS version number in the bower.json file and everything seems to work fine in Chrome, Safari, and Firefox except for when I enable strict dependency injection (ng-strict-di). When strict DI mode is on I get the error below (more detail here), but it only occurs in Chrome (FF & Safari both still work as expected).

Failed to instantiate module ng due to:
Error: [$injector:strictdi] function($provide) is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.3.0-build.3121+sha.a4520a7/...)
    at http://localhost:8080/assets/ngbp-0.3.2.js:87:12
    at annotate (http://localhost:8080/assets/ngbp-0.3.2.js:3352:17)
    at Object.invoke (http://localhost:8080/assets/ngbp-0.3.2.js:4036:21)
    at runInvokeQueue (http://localhost:8080/assets/ngbp-0.3.2.js:3964:35)
    at http://localhost:8080/assets/ngbp-0.3.2.js:3973:11
    at forEach (http://localhost:8080/assets/ngbp-0.3.2.js:338:20)
    at loadModules (http://localhost:8080/assets/ngbp-0.3.2.js:3954:5)
    at createInjector (http://localhost:8080/assets/ngbp-0.3.2.js:3894:11)
    at doBootstrap (http://localhost:8080/assets/ngbp-0.3.2.js:1494:20)
    at bootstrap (http://localhost:8080/assets/ngbp-0.3.2.js:1509:12

It seems that for some reason the angular source code itself is failing the strict DI test and thus won't load in the Chrome browser from within the ngbp framework. The above error comes from a fresh clone of ngbp with the only change being the version of AngularJS (1.3), not from our actual project (though the error is the same in both cases). I know that this version of ngbp doesn't officially support Angular 1.3 but as I said the app seems to work just fine with this change, even though it fails this test. I'm wondering if anyone might have some insight into what is causing this error and whether or not it would be ill-advised to proceed with this combination of AngularJS 1.3 and ngbp (version: 0.3.2)? Is there something else within ngbp that needs to be changed along with the version of AngularJS?

If it helps I'm serving up the files locally via cd ../bin; http-server -p 8080. If any other information would help just let me know and I'd be happy to provide it if possible.

Thanks for your time.

EDIT: If it helps I tested on OS X 10.9.4 with the following browser versions:

  • Chrome (Version 36.0.1985.143)
  • 64-bit Chrome (Version 37.0.2062.94)
  • Firefox (31.0)
  • Safari (Version 7.0.5 (9537.77.4))
like image 345
jason Avatar asked Sep 04 '14 00:09

jason


1 Answers

Looks like you might be using batarang, it does not work well with ng-strict-di. Try disabling batarang from google chrome developer tools and the app should start normally again.


[edit] AngularJS batarang now support ng-strict-di since v0.5.0. This error should no longer happen.

like image 182
psp Avatar answered Oct 22 '22 05:10

psp