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.
Related
I want to use Angular Datetimepicker without bower and npm.
I include datetimepicker.js into my index.html
<link href="https://cdn.rawgit.com/zhaber/datetimepicker/master/datetimepicker.css" type="text/css" rel="stylesheet" >
<script src="https://cdn.rawgit.com/zhaber/datetimepicker/master/datetimepicker.js"></script>
My app.js
var app = angular.module('myApp', [
'ui.router',
.....
'datetimepicker', // I try ui.bootstrap.datetimepicker and other names
]);
Also I have view and controller but now they are empty.
I get error:
Uncaught Error: [$injector:modulerr]
How to inject this library?
Addition 1:
And get error:
Uncaught Error: [$injector:modulerr]
Given this plunkr linked in the GitHub repo I think you need to add both
angular.module('myApp', [...'ui.bootstrap', 'ui.bootstrap.datetimepicker']);
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']);
});
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 am new to angularjs ,i inject d3 in main.js as follow:
function (angular) {
'use strict';
angular.module('main', ['ngFileUpload', 'ngCookies', 'ui.router', 'd3'])
.constant('_', window._);
})(window.angular);
but i get an error:
Uncaught Error: [$injector:modulerr]
Failed to instantiate module main due to:
Error: [$injector:modulerr] Failed to instantiate module d3 due to:
Error: [$injector:nomod] Module 'd3' 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.
If you are using normal d3 library you dont inject angular dependencies.
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
You can use d3.js angular directives or d3 "wrappers" angular directives, i recommend you:
nvd3
c3-angular-directive
I have created a webapp with MeanJS. I want to use ngDialog in the application, but not sure how and where to add the ngDialog.js in the application. Im trying to inject the ngDialog in the controller as shown below, but everytime error as unknown provider
angular.module('myModule').controller('MyController', ['$scope', '$http', 'ngDialog',
function ($scope, $http, ngDialog) {
error :
Error: [$injector:unpr] Unknown provider: ngDialogProvider <- ngDialog
Can anyone please let me know how to include the ngDialog in the meanjs application.
Thanks in advance
You should use bower to install ngDialog first. In your application root (where bower.json is located), issue the following command,
bower install --save ngDialog
Then, make sure you add ngDialog module in the app level. The following answer is specific to MEAN.JS.
In file public/config.js, find the line
var applicationModuleVendorDependencies = ['ngResource', 'ngCookies', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'ui.utils'];
Add 'ngDialog' to the end of the list
var applicationModuleVendorDependencies = ['ngResource', 'ngCookies', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'ui.utils', 'ngDialog'];
Then, include ngDialog's CSS and JavaScript file into the HTML template of the Angular application.
In file config/env/all.js, find assets.lib.css, append 'public/lib/ngDialog/css/ngDialog.min.css' to the list.
In the same file, find assets.lib.js, append 'public/lib/ngDialog/js/ngDialog.min.js' to the list.
You should add the ngDialog module in your module, like so:
angular.module('myModule', ['ngDialog']).controller('MyController'...
The original answer is still correct but for the new Mean.js 0.4 some stuff changed.
You still use
bower install --save ngDialog
to install ngDialog.
To add the dependency 'ngDialog' go to modules/core/client/app/config.js and add
var applicationModuleVendorDependencies = ['ngResource', 'ngCookies', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'ui.utils', 'ngDialog'];
Then this is where I struggled.
To include ngDialog's CSS and JavaScript file into the HTML template of the Angular application go to
config/assets/default.js
and under client.lib.css add 'public/lib/ng-dialog/css/ngDialog.min.css'
and client.lib.js add 'public/lib/ng-dialog/js/ngDialog.min.js' .
Note that the path of ngDialog changed to ng-dialog.