I've developed an AngularJS App and it works on Firefox,Opera,Safari, Edge, and Chrome but it won't work on IE 11.
Here is the specific error message I get in opening the app in IE 11:
[$injector:modulerr] Failed to instantiate module TicketSystemApp due
to: Error: [$injector:modulerr] Failed to instantiate module
TicketSystemControllers due to: Error: [$injector:nomod] Module
'TicketSystemControllers' is not available! You either misspelled the
module name or forgot to load it.
It seems like my module app is not loading.
Here is my entire script load:
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<!-- Angular js -->
<script src= "js/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-aria.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-messages.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src = "js/ui-bootstrap-tpls-1.2.1.js"></script>
<script src="bower_components/angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="js/md-data-table.min.js"></script>
<script src="js/toArrayFilter.js"></script>
<!-- auto-scroll module -->
<script src="bower_components/angular-scroll-glue/src/scrollglue.js"></script>
<script src = "js/app.js"></script>
<!-- Controllers -->
<script src = "js/controllers.js"></script>
<script src ="js/globalFunctions.js"></script>
<!-- Custom File Upload Angular -->
<script src="js/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
<script src="js/ng-file-upload.min.js"></script>
<!-- FACTORY -->
<script src = "js/authInterceptor.js"></script>
<!-- Services -->
<script src="js/auth.js"></script>
<script src="js/session.js"></script>
<!-- loading bar -->
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
I have this in as my html tag:
<html lang="en" ng-app="TicketSystemApp" xmlns:ng="http://angularjs.org" class="ng-app:TicketSystemApp" id="ng-app">
And I do have this in my head tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
I have tried manually bootstrapping but I just get the same error message twice.
Here is my app.js(Just the initialization):
var TicketSystemApp = angular.module('TicketSystemApp',[
'ngRoute',
'TicketSystemControllers',
'angular-loading-bar',
'ngAnimate',
'ui.router',
'ui.bootstrap',
'ngMaterial',
'md.data.table',
'angular-toArrayFilter'
]);
Here is my controller.js(just the initialization). I use this to module to contain all controllers:
var TicketSystemControllers = angular.module('TicketSystemControllers',[
'ngRoute',
'ui.router',
'ui.bootstrap',
'angular-loading-bar',
'ngAnimate',
'ngMaterial',
'ngMessages',
'ngFileUpload',
'md.data.table',
'bootstrapLightbox',
'luegg.directives'
]);
Kenta, it looks like you are not actually creating a controller at all. What you have done is created two modules, is that your intention? If so that is fine but you need to readjust your scripts and make sure you clear cache. IE 11 has an atrocious caching problem. Your scripts should be ordered this way
<script src = "js/controllers.js"></script>
<script src = "js/app.js"></script>
Also I noticed you have a global functions file. That file should be first if you have anything in the other two files that reference it. I suggest setting your scripts like this.
<script src= "js/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-messages.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src = "js/ui-bootstrap-tpls-1.2.1.js"></script>
<script src="bower_components/angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="js/md-data-table.min.js"></script>
<script src="js/toArrayFilter.js"></script>
<script src="bower_components/angular-scroll-glue/src/scrollglue.js"></script>
<script src="js/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
<script src="js/ng-file-upload.min.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
<script src = "js/controllers.js"></script>
<script src = "js/app.js"></script>
<script src ="js/globalFunctions.js"></script>
<script src="js/auth.js"></script>
<script src="js/session.js"></script>
<script src = "js/authInterceptor.js"></script>
I don't know if this is the exact order unless I see all of your JS but I assume this is pretty close. Usually you want all files your create in the correct order at the bottom of your and all vendor/3rd party files at the top in the correct order.
You load the controller before you declare the angular module
<script src = "js/controllers.js"></script>
<script src = "js/app.js"></script>
If you change the order to
<script src = "js/app.js"></script>
<script src = "js/controllers.js"></script>
it should works.
Maybe the same with toArrayFilter.js?
You have to be sure, that the module definition is made before you load some controllers, directives or factories!!!
In my case it was using const val = something.
When I changed it to var val = something, the error was gone.
Related
When no modules are added, everything works for the page using controller 'articles', when adding modules needed the page needing controller 'flow' everything works in flow, but 'articles' gives me this error.
var AC = angular.module('AC', ['ngRoute','ngMaterial','firebase'])
AC.controller('articles', function($scope){...})
AC.controller('flow', function($scope,$firebaseArray) {...}
My scripts:
<!-- START STYLE AND SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- END STYLE AND SCRIPTS -->
I addded the ngRoute module, it didn't work. Then I tried using the normal angular.js file as it apparently gives a specific error, didn't work as well.
Any help?
Try this order with the mathcing versions of angular-route and angular-fire
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<!-- Angular Route -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<!-- Angular Material -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<!-- our own app scripts -->
<script src="js/concat/app.js"></script>
Apologies for this question. The libraries were added on the flow.html file but not on the article.html file. The two solutions I provided at the bottom of the question does work as answered in previous questions.
I am trying to use scroll-glue to automatically scrolls to the bottom of message.html page. I tried to add the directive 'luegg.directives' like this.
(function(){
'use strict';
var module = angular.module('app', ['onsen','luegg.directives']);
but i'm getting this error
Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module luegg.directives due to:
[$injector:nomod] Module 'luegg.directives' 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.
What am I doing wrong? also, is there any other way to auto scroll to the bottom of the page?
Please add file (scrollglue.js) of 'luegg.directives' after angularjs files in index.html.
Check following inclusion I did for me.
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script type="text/javascript" src="js/higgidy_carousel.js"></script>
<script type="text/javascript" src="bower_components/ngtouch/build/ngTouch.min.js"></script>
<script src="bower_components/ng-swippy/ng-swippy.js"></script>
<script type="text/javascript" src="js/ng-infinite-scroll.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.3/angular-sanitize.js"></script>
<script type="text/javascript" src="js/angular-translate.js"></script>
<script type="text/javascript" src="js/owl.carousel.js"></script>
<script type="text/javascript" src="js/angular-base64.js"></script>
<script type="text/javascript" src="js/angular-sanitize.js"></script>
<script type="text/javascript" src="js/scrollglue.js"></script>
Error: [$injector:modulerr]
http://errors.angularjs.org/1.4.0/$injector/modulerr?p0=foo&p1=%5B%24injector%3Anomod%5D%20Module%20'foo'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.4.0%2F%24injector%2Fnomod%3Fp0%3Dfoo%0Ahttp%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A1957%3A71%0Aensure%40http%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A1879%3A45%0Amodule%40http%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A1953%3A20%0Ahttp%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A4340%3A35%0AforEach%40http%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A338%3A24%0AloadModules%40http%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A4324%3A12%0AcreateInjector%40http%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A4250%3A22%0AdoBootstrap%40http%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A1627%3A34%0Abootstrap%40http%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A1648%3A23%0AangularInit%40http%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A1542%3A14%0Ahttp%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A28130%3A16%0Atrigger%40http%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A2975%3A9%0AeventHandler%40http%3A%2F%2Flocalhost%3A8080%2Ffoo%2Fassets%2Fjs%2Fangular%2Fangular.js%3A3249%3A25
I have included below reference in index.html
<script type="text/javascript" src="assets/js/angular/angular.js"></script>
<script type="text/javascript" src="assets/js/angular/angular-route.js"></script>
<script type="text/javascript" src="assets/js/angular/angular-resource.js"></script>
<script type="text/javascript" src="assets/js/angular/angular-cookies.js"></script>
<script type="text/javascript" src="assets/js/angular-filter/angular-filter.min.js"></script>
<script type="text/javascript" src="assets/js/select/select.min.js"></script>
<script type="text/javascript" src="assets/js/ui-utils/ui-utils.min.js"></script>
<script type="text/javascript" src="assets/js/ui-bootstrap/ui-bootstrap-tpls.min.js"></script>
and my js file looks like:
'use strict';
var fooApp = angular.module('foo', ['ui.utils', 'ui.bootstrap', 'ngRoute', 'ngResource', 'ngCookies', 'angular.filter', 'ui.select']);
You need to include angular-cookies in your index.html and then inject the ngCookies dependency.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-cookies.js">
In the module, you have to make sure that, you have included all the dependencies for the module 'app'
It shows that some of the dependencies are not loaded.
you have to include ngCookies in your app
please refer
https://docs.angularjs.org/api/ngCookies
or include <script src="ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-cookies.js"> in your index file after angularjs
I've been sitting with this problem about an hour, I'm not sure what went wrong. I've been looking this question at stackoverflow, but nothing can help me. I tried to putting Moment js in my project.
Refer to this link (https://github.com/urish/angular-moment)
Already follow the instruction.
Got error: angular is not defined at angular-moment.js:630.
This is my code:
index.html
<!-- moment extension -->
<script src="lib/moment/moment.js"></script>
<script src="lib/angular-moment/angular-moment.js"></script>
<!-- ionic/angularjs js -->
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="lib/ionic-timepicker/dist/ionic-timepicker.bundle.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
Javascript
angular.module('starter.controller', ['ionic', 'ionic-timepicker', 'angularMoment'])
.controller('checkoutOrderCtrl', function ($scope, moment) {
var NowMoment = moment();
$rootScope.date = NowMoment.format('YYYY-MM-DD');
$rootScope.time = NowMoment.format('h:mm:ss');
}
Thanks for help.
You need to place angular-moment.js after angular.js file:
<script src="angular.min.js"></script>
<!-- moment extension -->
<script src="lib/moment/moment.js"></script>
<script src="lib/angular-moment/angular-moment.js"></script>
In the beginning of my html I've declare my application:
<html lang="en" ng-app="MyAppModule">
and at the bottom I have include all the necessary files, the Chrome does not complain for any missing file:
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-resource.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/Controllers/EventController.js"></script>
<script src="js/Services/EventService.js"></script>
<script src="js/filters.js"></script>
Here is my application:
'use strict';
// Declare app level module which depends on filters, and services
var MyAppModule = angular.module('MyAppModule', ['ngResource']).config(function($routeProvider){
$routeProvider.when('/mybooks',{
templateUrl:'/templates/mybooks.html',
controller:'EventController'
}
);
});
But when I am trying to see the page there is a Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.14/$injector/modulerr?p0=MyAppModule&p1=Err…js.org%2F1.2.14%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider%0A%20%20%20...<omitted>...2) on the browser. Any help? Am I missing something?
Try replacing this:
['ngResource']
With this:
['ngResource', 'ngRoute']
It looks like you're not injecting the route provider.