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.
Related
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.
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 have tried to debug my ionic app with no success. I keep getting the error
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.signin due to:
Error: [ng:areq] Argument 'fn' is not a function, got string
http://errors.angularjs.org/1.3.13/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20string
I have ensured that the order of my refering of js files is okay. I have also ensured that my angular version is consistent across the libraries.
Below is a snippet of my index.html file
<body ng-app="app">
<ion-nav-view></ion-nav-view>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/lodash/lodash.min.js"></script>
<script src="lib/restangular/dist/restangular.js"></script>
<script src="lib/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="lib/angular-messages/angular-messages.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- my app's js -->
<script src="js/app.js"></script>
<script src="js/core/core.js"></script>
<script src="js/core/config/config.js"></script>
<script src="js/core/services/authentication/authentication.service.js"></script>
<script src="js/core/services/authentication/base64.service.js"></script>
<script src="js/core/services/authentication/interceptor.service.js"></script>
<script src="js/core/services/authentication/token.service.js"></script>
<script src="js/core/services/error/error.service.js"></script>
<script src="js/routes/layout/layout.js"></script>
<script src="js/routes/layout/layout.route.js"></script>
<script src="js/routes/layout/layout.controller.js"></script>
<script src="js/routes/signin/signin.js"></script>
<script src="js/routes/signin/signin.route.js"></script>
<script src="js/routes/signin/signin.controller.js"></script>
<script src="js/routes/signup/signup.js"></script>
<script src="js/routes/signup/signup.route.js"></script>
<script src="js/routes/signup/signup.controller.js"></script>
</body>
app.js snippet
(function () {
'use strict';
angular.module('app', [
// angular modules
'ngAnimate',
'ngSanitize',
'ngMessages',
// 3rd party modules
'ui.router',
'ionic',
'restangular',
'LocalStorageModule',
'ngCordova',
// app modules
'app.core',
'app.layout',
'app.signup',
'app.signin'
]);
})();
I am having an issue with an angular application. I am using bower. When I startup the server, I sometimes get this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module ui.router due to:
Error: [$injector:nomod] Module 'ui.router' is not available! You either misspelled the modul......2)
Then I sometimes get this error:
Uncaught SyntaxError: Unexpected identifier angular.js:573
Uncaught TypeError: Cannot read property 'module' of undefined angular-route.js:24
Uncaught SyntaxError: Unexpected token ILLEGAL angular-ui-router.js:455
Uncaught ReferenceError: angular is not defined ui-bootstrap-tpls-0.11.0.js:8
Uncaught ReferenceError: angular is not defined app.js:4
Uncaught ReferenceError: angular is not defined
Sometimes the css doesn't load completely either, but don't get a console error. Other times it works perfectly fine.
Here is my code setup
<body ng-app="myApp" class="ng-scope">
<div>
<div ui-view>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/create.js"></script>
<script src="js/view.js"></script>
<script src="js/header.js"></script>
<script src="js/form-service.js"></script>
<script src="js/form-directive.js"></script>
<script src="js/field-directive.js"></script>
<script src="js/jquery.dcjqaccordion.2.7.js"></script>
</body>
here is my app.js where the app lives
var myApp = angular.module('myApp', [
'ui.bootstrap.tabs',
'ui.bootstrap.accordion',
'ui.bootstrap.collapse',
/*
'$strap.directives',
*/
'ui.router',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]);
Not too sure what to do. I thought loading angular then loading the other scripts after a time delay would fix it, but that wouldn't work.
Your problem is not using absolute URLs to .js files. Include a / in front of each path and it should fix your problem. For instance change:
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js">
To
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="/bower_components/angular-ui-router/release/angular-ui-router.js">
Do this for all files.