I'm getting an $injector:modulerr error
index.html (loading the idle js at the end, after everything)
<script src="/lib/ng-idle/angular-idle.js"></script>
Angular, ngIdle
app = angular.module("lpApp", ['ngGrid', 'ngCookies', 'ui.sortable', 'toaster','ngIdle', 'ui.bootstrap', 'ui.utils', 'ui.date', 'ngTable']);
The error occurs here, for some reason ngIdle is causing a problem when trying to bootstrap.
angular.element(document).ready(function() {
angular.bootstrap(document, ['lpApp']);
});
Related
I have this piece of code from a mobile website that used to work perfectly.
document.addEventListener('deviceready', function() {
// launch
}, false);
var app = angular.module('app', []);
app.config(function($routeProvider){
$routeProvider
when('/home', {templateUrl: 'views/home.html'})
.when('/about', {templateUrl: 'views/about.html'})
.otherwhise({redirectTo: '/home'})
});
I updated to a newer version of angular, and I got a error.
I found out on other threads that ngRoute is now separate from angular.js so I've added it.
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
Now my error is :
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
I don't understand why $routeProvider is still unknow now that I've added the angular route script.
I tried couple fix that I've found here but can't make it work. Any ideas of what I missed ?
Thank you.
ngRoute is now separate from angular.js so to use it you have to inject it as a dependency, like this:
var app = angular.module('app', ['ngRoute']);
as for the following error
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:unpr] Unknown provider: $routeProvider
Usually, this error appears when angular-route.js is not loaded for some reason.
The said project has mismatched versions for angular and its module, for example:
<script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
so Make these versions match. They should likely be .../1.6.4/angular.js and .../1.6.4/angular-route.js
I am trying to add angular material to a project that i have generated using jhipster. I have added the dependencies for angular-aria, angular-animate and angular-material in index.html like this:
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
I created the module like this:
angular
.module('clinicPortalApp', [
'ngStorage',
'tmh.dynamicLocale',
'pascalprecht.translate',
'ngResource',
'ngCookies',
'ngAria',
'ngCacheBuster',
'ngFileUpload',
'ui.bootstrap',
'ui.bootstrap.datetimepicker',
'ui.router',
'infinite-scroll',
'angular-loading-bar',
'ngAnimate',
'ngMaterial'
// jhipster-needle-angularjs-add-module JHipster will add new module here
])
And when I run the server using maven and I am trying to access the application I am receiving the following error
Uncaught Error: [$injector:modulerr] Failed to instantiate module clinicPortalApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngMaterial due to:
In the bower_components folder I have the angular material dependency. I do not know how to solve this issue. Could you please help me?
Thanks.
I'm trying to add a carousel(http://angular-ui.github.io/bootstrap/#/carousel) to my Bootstrap 3 website. But, All images are showing at once with the error.
When i create a sample project with carousel(http://angular-ui.github.io/bootstrap/#/carousel) code it is working fine.
My module looks like below
var app = angular.module('myapp', ['ngRoute', 'angularFileUpload', 'LocalStorageModule', 'angular-loading-bar']);
And, for carousel requires below.
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
So when i add above 2 into my project
var app = angular.module('myapp', ['ngRoute', 'ngAnimate', 'ui.bootstrap', 'angularFileUpload', 'LocalStorageModule', 'angular-loading-bar']);
i am getting below error.
https://docs.angularjs.org/error/$injector/modulerr?p0=myApp&p1=Error:%20%5B$injector:modulerr%5D%20http:%2F%2Ferrors.angularjs.org%2F1.2.16%2F$injector%2Fmodulerr%3Fp0%3DngAnimate%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.2.16%252F%2524injector%252Fnomod%253Fp0%253DngAnimate%250A%2520%2520%2520%2520at%2520Error%2520(native)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A6%253A450%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A20%253A260%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A21%253A262%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A33%253A1%250A%2520%2520%2520%2520at%2520Array.forEach%2520(native)%250A%2520%2520%2520%2520at%2520q%2520(http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A7%253A280)%250A%2520%2520%2520%2520at%2520e%2520(http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A32%253A445)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A26264%252Fscripts%252Fangular.min.js%253A33%253A18%250A%2520%2520%2520%2520at%2520Array.forEach%2520(native)%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:6:450%0A%20%20%20%20at%20http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:33:332%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20q%20(http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:7:280)%0A%20%20%20%20at%20e%20(http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:32:445)%0A%20%20%20%20at%20http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:33:18%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20q%20(http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:7:280)%0A%20%20%20%20at%20e%20(http:%2F%2Flocalhost:26264%2Fscripts%2Fangular.min.js:32:445
EDIT: After referring below
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
I am getting below error.
Line: 4442
Error: [$injector:cdep] Circular dependency found: $http <- $templateRequest <- $$animateQueue <- $animate <- cfpLoadingBar <- $http <- authService
http://errors.angularjs.org/1.4.7/$injector/cdep?p0=%24http%20%3C-%20%24templateRequest%20%3C-%20%24%24animateQueue%20%3C-%20%24animate%20%3C-%20cfpLoadingBar%20%3C-%20%24http%20%3C-%20authService
According to the stacktrace, angular didn't found the module ngAnimate. You probably forgot to link angular-animate script from your index.html page.
index.html
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
I have been trying to inject the other module(account.js) into main module (app.js) in a SPA using angularJs as given below
var app = angular.module('UniversityApp', ['ngAnimate', 'ngRoute', 'ngResource', 'ui.bootstrap', 'landing','account']);
angular.bootstrap(document, ['UniversityApp']); throws error "Uncaught Error: No module: myApp "
It should be
angular.bootstrap(document, ['UniversityApp']);
instead
angular.bootstrap(document, ['myApp']);
According to the doc
Error: [ng:areq] http://errors.angularjs.org/1.3.15/ng/areq?p0=homeController&p1=not%20aNaNunction%2C%20got%20undefined
I am getting the above error
Controller.js
angular.module('app').controller('homeController', function($scope) {});
app.js
var app = angular.module('app', ['base', 'ngRoute', 'routeResolverServices']);
angular.bootstrap(document, ['app']);
return app;
This doesn't work because of the order of your scripts (and wouldn't work in any order the way you defined it). When Controller.js loads first, there is is still no module named "app". When app.js loads first, it immediately bootstraps the app without the controller.
It's best to define one module per file, for example:
feature1.js
angular.module("feature1", []).controller("homeController", function(){});
app.js
var app = angular.module('app',
['base', 'feature1', 'ngRoute', 'routeResolverServices']);
app.bootstrap(document, ['app']);
and load app.js last:
<script src="feature1.js"></script>
<scirpt src="app.js"></script>