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
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>
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:
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.
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
.
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'
})
}])
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With