8

I am using Browserify to wrap everything up. I have just upgraded from 1.2.23 to 1.3.0 and am now getting the following errors:

Firefox Error

TypeError: angular.module is not a function

var app = angular.module('login-Controller', ['Views']);
   ----------^

Clearly says that angular is not defined. So I outputed the output from angular

var angular = require('angular'),
console.info(angular); // Object {} ='s an empty object

Does this mean that angular is no longer compatible with browserify? If it is, how can I get it working?

Detailed Error from Chrome

 Uncaught TypeError: undefined is not a function main.js:25868 C:\var\www\stage.mayfieldafc.com\src\site\js\users\loginCntrl.js.angularmain.js:1 smain.js:1 (anonymous function)main.js:28 ./src/site/js/app.js.angularmain.js:1 smain.js:1 emain.js:1 (anonymous function)
main.js:183 Uncaught Error: [$injector:modulerr] Failed to instantiate module mays due to:
Error: [$injector:nomod] Module 'mays' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.0/$injector/nomod?p0=mays
    at http://localhost:3000/js/main.js:183:12
    at http://localhost:3000/js/main.js:1900:17
    at ensure (http://localhost:3000/js/main.js:1824:38)
    at module (http://localhost:3000/js/main.js:1898:14)
    at http://localhost:3000/js/main.js:4167:22
    at forEach (http://localhost:3000/js/main.js:438:20)
    at loadModules (http://localhost:3000/js/main.js:4151:5)
    at createInjector (http://localhost:3000/js/main.js:4077:11)
    at doBootstrap (http://localhost:3000/js/main.js:1587:20)
    at bootstrap (http://localhost:3000/js/main.js:1608:12)
http://errors.angularjs.org/1.3.0/$injector/modulerr?p0=mays&p1=Error%3A%20…at%20bootstrap%20(http%3A%2F%2Flocalhost%3A3000%2Fjs%2Fmain.js%3A1608%3A12)main.js:183 (anonymous function)main.js:4190 (anonymous function)main.js:438 forEachmain.js:4151 loadModulesmain.js:4077 createInjectormain.js:1587 doBootstrapmain.js:1608 bootstrapmain.js:1502 angularInitmain.js:25682 (anonymous function)main.js:2845 triggermain.js:3116 eventHandler

Markup

 html(ng-app='mays)
2
  • 1
    I'm having this exact same problem with Angular 1.3 and Browserify. The Angular object is empty, so then the call to angular.module is undefined. It seems like the version of Angular downloaded by npm doesn't export anything. Any resolution yet?
    – Jakemmarsh
    Oct 20, 2014 at 16:47
  • Ye thats the exact problem. I'll add the answer to how i fixed it. Its a bloody horrible horrible... horrible hac KD: Oct 20, 2014 at 16:52

3 Answers 3

12

As mentioned by @JeffB, you can use browserify-shim to (hopefully temporarily) remedy this problem.

First, npm install --save-dev browserify-shim. Then, add the following to your package.json:

"browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browser": {
    "angular": "./node_modules/angular/angular.js"
  },
  "browserify-shim": {
    "angular": "angular"
  }

This should then let you require and access Angular as expected.

3
  • That means you have to remove it from the packages otherwise you'll get a conflict in names.. :/ Oct 21, 2014 at 9:36
  • @JamieHutber I'm not sure what you mean? I have this working in a project right now with no further changes
    – Jakemmarsh
    Oct 21, 2014 at 13:55
  • 1
    This worked for me given the same error. Thanks so much!
    – isTravis
    Oct 28, 2014 at 19:13
1

The problem is that angular haven't updated their npm packages to be compatible with browserify just yet.

My fix was disgusting but its working. I simply downloaded v1.3.0 and pasted it into:

 node_modules\angular\lib\angular.min.js

Now browserify will compile and use the latest version. This I hope is a temporary fix until they update the package.

2
  • Can't you use browserify-shim instead of doing this? That's what I'm doing with 1.3.
    – JeffB
    Oct 20, 2014 at 17:08
  • I got a conflict in names when shimming it. Oct 21, 2014 at 9:37
0

It looks like you're defining the module name to be 'login-Controller' in your script, but calling it 'mays' in your markup. I would expect to see something like this:

//declare app in main.js
angular.module('name-of-app', [<modules>])

<!-- call your app in markup -->
<html ng-app="name-of-app"></html>

//jade
html(ng-app='name-of-app')
1
  • 1
    I don't think this is the problem. This is certainly A problem, but I believe it's unrelated to the fact that the Angular object is empty after required by Browserify.
    – Jakemmarsh
    Oct 20, 2014 at 16:46

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.