Uncaught Error: [$injector:unpr] for ngMaterial - angularjs

I am having issue with ngMaterial while including it in project then its showing error Uncaught Error: [$injector:unpr]
My app.js file look like
angular
.module('app', ['ui.router','ngMaterial','objectTable'])
.config(config)
.run(run);
and in view, I have included files in this order
<!-- external scripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!-- bower plugins -->
<script type="text/javascript" src="app-content/scripts/object-table.js"></script>
<!-- application scripts -->
<script src="app.js"></script>
<script src="app-services/user.service.js"></script>
<script src="app-services/flash.service.js"></script>
<script src="home/index.controller.js"></script>
<script src="account/index.controller.js"></script>
Can anyone help me to solve this? I tried to change the order of files but still, the issue is same.

It should be like this.
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
Import angular-animate and angular-aria before angular-material.
see this code. switch angular-animate import and see the difference.
http://codepen.io/next1/pen/NNRMeQ

For posterity: I installed using Visual Studio and NuGET. I first installed my angularjs.core package (only the angular file). This was version 1.5.8. I then installed angular material afterwards. This was installed in version 1.1.3. What i didnt notice at first was that when iu installed angular material was that it included its own version of angular.
The point is - i was using my first installed "angularjs.core" in a way to high version (i think this was the problem). I then switched to using the angular version shipped with material NuGet package. Then then everything worked.

Related

AngularJS nvD3 Error - What versions are compatible?

I have the same problem as with this user:
Angular nvD3 Error: Invalid isolate scope definition for directive nvd3
The answer there said "use the latest angularjs" beyond Angular 1.1.4....but I am using the latest AngularJS!! AngularJS v1.6.7
What could I be doing wrong?
Works with this setup
<link rel="stylesheet" href="//unpkg.com/nvd3/build/nv.d3.css"/>
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/d3#3/d3.js" charset="utf-8"></script>
<script src="//unpkg.com/nvd3/build/nv.d3.js"></script>
<script src="//unpkg.com/angular-nvd3/dist/angular-nvd3.js"></script>
DEMO on PLNKR.
See angular-nvd3 Issue #539 - d3 version 4.x is not supported

Angular hybrid app, typeerror calendar.fullcalendar is not a function

I am working on an application that uses AngularJS and Angular (2+). In the new version, I am using system.js to import the Angular app. Without the system.js import the calendar works fine, but with system.js there is a problem to initialize.
I have tried the trick below with calendar = $(elm); with no luck.
https://github.com/angular-ui/ui-calendar/issues/267
Even trying var calendar = $('#calendar’).
The problem does not seem to be in recognizing that there exists a calendar element. From what I can infer logging the framework’s source code, when working correctly, the calendar element has these classes when initializing.
div#calendar.calendar.ng-pristine.ng-untouched.ng-valid.ng-isolate-scope.fc.fc-cursor.fc-ltr.fc-unthemed
Currently the initialize is trying to use this as the calendar element which throws the angular.min.js:117 TypeError: calendar.fullCalendar is not a function error, it still finds the correct element but does not append the classes to it.
div#calendar.calendar.ng-pristine.ng-untouched.ng-valid.ng-isolate-scope
script.ejs
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<—-! All the AngularJS -—>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-sanitize.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- Moment -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" integrity="sha256-1hjUhpc44NwiNg8OwMu2QzJXhD8kcj+sJA3aCQZoUjg=" crossorigin="anonymous"></script>
<!-- ui calendar -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/1.0.0/calendar.min.js" integrity="sha256-DBa6dvjY39GU4NQ2Ia2CIPVFszxgZ4N3JccyPvJNPLI=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.js"></script>
AngularJS only app, index.ejs :
<body>
<div id="shell" data-ng-app="app" data-ng-controller="shellController">
…
</div>
<%- include partials/scripts %>
</body>
Hybrid app index.ejs :
<body class="full-width">
<div id="shell" data-ng-controller="shellController">
…
</div>
<%- include partials/scripts %>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) { console.error('ERR from import: ’,err); });
</script>
</body>
I am using v 2.7.1 of fullcalendar, and v 1.0.0 of angular-ui-calendar. Any help to what might be the cause of this problem would be extremely appreciated, I’ve been looking at this for days!
I found the answer with this post.
How to import fullcalendar v.3.0.1 with systemjs?
Turns out the problem lay in the moment.js file not being within the meta property within the system.js config.

How to manually install AngularJS ui.bootstrap

I am building an SPA to run on a page in SharePoint 2013 online and having problems installing ui-bootstrap manually.
I have downloaded this file https://github.com/angular-ui/bootstrap/blob/master/src/modal/modal.js and saved as ui-bootstrap.js.
Then I reference the file in index.html:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="~site/Webparts/js/angular.min.js"></script>
<script type="text/javascript" src="~site/Webparts/js/angular-route.min.js"></script>
<script type="text/javascript" src="~site/Webparts/js/ui-bootstrap.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/testLabApp.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/dal.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/email.js"></script>
<link href="~site/Webparts/testLabApp/style.css" rel="stylesheet" />
Then added dependency in App js file:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap"]);
However, I am getting injector error:
[$injector:modulerr] http://errors.angularjs.org/1.4.2/$injector/modulerr?p0=testLabApp&p1=Error%3A%20%5B%24injector%3Amodulerr...
Clearly, I have done something wrong, but I could not find how to download the right file(s) from github.
Any help is most appreciated.
Regards
Craig
If you are just using the modal.js, there is no module named ui.bootstrap.
Try changing:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap"]);
To:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap.modal"]);
Make sure to also download the template files for the modal (window.html and backdrop.html)
It looks like the problem is that you only downloaded modal.js, which is only the modal section, not all of ui-bootstrap.
Try this file: https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.js
Or minified: https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js

One specific file missing from injected bower_components

I just installed Angular UI Grid via Bower.
My bower_components directory looks like this:
.
..
angular
angular-animate
angular-cookie
angular-cookies
angular-mocks
angular-resource
angular-sanitize
angular-touch
angular-ui-grid <-- the interesting directory
angular-ui-router
angularjs-rails-resource
bootstrap-sass-official
fontawesome
jquery
ng-token-auth
Confusingly, my index file looks like this:
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../bower_components/angular-touch/angular-touch.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
<script src="../bower_components/angular-cookie/angular-cookie.js"></script>
<script src="../bower_components/ng-token-auth/dist/ng-token-auth.js"></script>
<script src="../bower_components/angularjs-rails-resource/angularjs-rails-resource.js"></script>
<!-- endbower -->
<!-- endbuild -->
Notice the absence of angular-ui-grid.
It's not that there are no .js files in bower_components/angular-ui-grid:
$ find bower_components/angular-ui-grid -name '*.js'
bower_components/angular-ui-grid/ui-grid.js
bower_components/angular-ui-grid/ui-grid.min.js
What could be the problem?
Ah ha. I had angular-ui-grid in devDependencies in bower.json. It needed to be in dependencies.

How's Yeoman's AngularJS generator referencing Bootstrap SASS files?

I generated a new AngularJS app using Yeoman:
yo angular
And selected the SASS-based Bootstrap files to be included as well.
Now index.html has a block of code that looks like this:
<!-- build:js scripts/plugins.js -->
<script src="bower_components/sass-bootstrap/js/affix.js"></script>
<script src="bower_components/sass-bootstrap/js/alert.js"></script>
<script src="bower_components/sass-bootstrap/js/button.js"></script>
<script src="bower_components/sass-bootstrap/js/carousel.js"></script>
<script src="bower_components/sass-bootstrap/js/transition.js"></script>
<script src="bower_components/sass-bootstrap/js/collapse.js"></script>
<script src="bower_components/sass-bootstrap/js/dropdown.js"></script>
<script src="bower_components/sass-bootstrap/js/modal.js"></script>
<script src="bower_components/sass-bootstrap/js/scrollspy.js"></script>
<script src="bower_components/sass-bootstrap/js/tab.js"></script>
<script src="bower_components/sass-bootstrap/js/tooltip.js"></script>
<script src="bower_components/sass-bootstrap/js/popover.js"></script>
<!-- endbuild -->
But my app's app/bower_components folder does not have sass-bootstrap. Where are these sass-bootstrap files located at?
you have to run "bower install sass-bootstrap -save" from the command line in your project's root directory to install it. sass-bootstrap isn't being put in bower.json, which is why you have to install it and then add the -save so it puts the entry in bower.json.

Resources