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'
]);
})();
Related
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 read every resource I can find on the ngCookies api. I have also read every resource I could find regarding this injector error.
This is my import stack
<!-- Latest compiled and minified jquery -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular.min.js"></script>
<!-- get cookie api support -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.13/angular-cookies.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="/javascripts/angularApp.js"></script>
This is the code for my angularApp
angular.module('flapperNews', ['ui.router','ngCookies'])
.config([
'$stateProvider',
'$urlRouterProvider',
'$cookies',
function($stateProvider, $urlRouterProvider, $cookies) {
I am getting this error:
Uncaught Error: [$injector:modulerr]
I have checked every explanation of this error and still cannot figure out what is going wrong. Any ideas would be appreciated.
"$cookies" is not available during the configuration phase in AngularJS.
Use it in your controllers, services, factories etc.
Like in example or e.g.:
.service('cookiesService', ['$cookies', function($cookies){
console.log($cookies);
}]);
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.
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.