AngularJS fail to load module

Question

EDIT: This only happens with IE (tested on IE10)

I have a app that loads fine initially, however, when refreshed it gives this error:

SCRIPT5022: No module: myAppModule

myAppModule is an angular module defined in app.js which is loaded after loading angular.js

angular.module('myAppModule', []);

and is auto-bootstrapped via:

<html ng-app="myAppModule">

The scripts are loaded as follows (no AMD loader):

<script>window.jQuery ||
    document.write('<script src="js/vendor/jquery-1.8.0.min.js"></script>')</script>
<script>window.angular ||
    document.write('<script src="js/vendor/angular-1.0.2.min.js"></script>')</script>

<script src="js/app.js"></script>
<script src="js/controller.js"></script>

I reckon that angularjs is getting loaded first and auto-bootstrapping the application, but app.js has not been loaded yet

Hmm, this is very strange, AngularJS will normally start boostraping modules after it is fully loaded. Could you share some more info: browser used, method of loading scrips (a simple scrit tag or AMD) link to the application, more code etc. A plunk would be ideal. — pkozlowski.opensource
– pkozlowski.opensource, Commented Oct 20, 2012 at 12:48
edited. I believe that AngularJS is getting fully loaded before app.js has a chance to load? Is this possible? — nehz
– nehz, Commented Oct 20, 2012 at 12:54
Out of curiosity: could you try to load jquery and angular using a regular <script> tag? — pkozlowski.opensource
– pkozlowski.opensource, Commented Oct 20, 2012 at 20:14
yeah I tried just loading them locally rather then through the CDN, but still the same — nehz
– nehz, Commented Oct 21, 2012 at 2:15
also this only occurs when I deploy to a remote webserver... running locally seems fine except for the very occasional time it happens... again I reckon its lag between loading AngularJS and app.js — nehz
– nehz, Commented Oct 21, 2012 at 2:16

nehz · Accepted Answer · 2012-10-20 14:17:42Z

18

Ok I don't know why auto-bootstrapping is failing, but if I manually bootstrap the application it works fine.

e.g.

<html>

...

<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<script>angular.bootstrap(document, ['myAppModule']);</script>

answered Oct 20, 2012 at 14:17

nehz

2,2023 gold badges24 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Connor Leech Over a year ago

so this is an alternative to using ng-app?

zloctb Over a year ago

YES ... var myAppModule = angular.module("myAppModule",[]); myAppModule.controller ("purchaseController", function ($scope){ .... }) angular.bootstrap(document, ['myAppModule']);

Barnabas Kendall · Accepted Answer · 2013-06-08 21:25:49Z

I felt like and idiot when I found what I was doing wrong, but in case you're like me, then here are some other things to check first:

Make sure the child module is loading first. In my case, I had to make sure that the child module was physically before my parent module. You can confirm this by putting a breakpoint on each module init line.
Even with correct physical order, the execute order was still off. One of my modules was wrapped in a self-executing function, and the other was not. Doh.
There was an error in the child function which actually caused this error to show twice in the console. This is because I use a syntax like this:
```
var mod = angular.module("blah", []);
mod.filter("filterName", function(){ ... }); 
```
At one point I forgot the empty brackets when starting the module, so the line looked like this and threw this error:
```
var mod = angular.module("blah");  // <-- wrong
```

To recap, make sure the child module executes first and has no errors.

Martijn Pieters · Accepted Answer · 2012-12-19 15:19:17Z

3

I had this very same problem, only in IE9. Lower versions of IE actually worked fine, as did newer browsers.

Manually bootstrapping solved the problem, but threw an error "Unknown Provider" for a filter that is part of my module. Note that the filter still seemed to be functioning as expected.

In the end, the solution that solved my problem and ceased the errors from being thrown at all was to simply rename the module file to be the same as the module.

So if the name of my module was myAppModule then the filename should be myAppModule.js and not my_app_module.js.

edited Dec 19, 2012 at 15:19

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

answered Dec 19, 2012 at 14:58

trey-jones

3,4671 gold badge29 silver badges37 bronze badges

Comments

Michael Fulton · Accepted Answer · 2016-04-26 18:22:10Z

1

app.config(['$stateProvider', ($stateProvider) => {
  $stateProvider.state('login', {
    url: '/login',
    templateUrl: 'partials/login.html'
  }).state('dashboard', {
    url: '/dashboard',
    templateUrl: 'partials/dashboard.html'
  })
}])

In my case Internet Explorer didn't like the arrow functions. Changing these to function(){} notation fixed the issue:

app.config(['$stateProvider', function ($stateProvider) {
  $stateProvider.state('login', {
    url: '/login',
    templateUrl: 'partials/login.html'
  }).state('dashboard', {
    url: '/dashboard',
    templateUrl: 'partials/dashboard.html'
  })
}])

answered Apr 26, 2016 at 18:22

Michael Fulton

5,0003 gold badges29 silver badges42 bronze badges

Comments

Lukus · Accepted Answer · 2013-09-27 20:38:40Z

0

By the way, using Angular 1.0.6, loading jQuery before angular (hardcoded script tags) causes IE10 to throw 'no Module' error.

The only option I could find to correct it is to manually bootstrap and ensure my app.js that defines the module was loaded after all other child module references (like Barnabas mentioned).

answered Sep 27, 2013 at 20:38

Lukus

1,0481 gold badge11 silver badges11 bronze badges

Comments

Volker Holz · Accepted Answer · 2015-12-21 07:40:36Z

0

We had the same issue only in IE. It was caused by a typo (some cat must have stepped on the keyboard):

<script type=" text/javascript" src="assets/js/app.js"></script>

The leading space in the value of the type-Attribute was causing the problem. As soon as it was removed the app worked fine again.

answered Dec 21, 2015 at 7:40

Volker Holz

1161 silver badge8 bronze badges

Collectives™ on Stack Overflow

AngularJS fail to load module

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related