Maybe a real newbie question, but anyway.
I'm working on a Angular script which I'm testing in JsFiddle. Therefore the framework is set to Angular JS 1.2.1 (the highest one available there). Within the script I want to use Angular-UI bootstrap for typeahead and other features.
When I add the dependency to my module declaration I get an error.
angular.module('MyModule', ['ui.bootstrap'])
Failed to instantiate module ui.bootstrap due to: [$injector:nomod] Module 'ui.bootstrap' is not available!
Question: On the left side I can add references to external libraries but I'm kinda too stupid to find the URI that is used to reference Angular-UI. Any idea?
Related
With Angularjs ui-grid used with Angular 4, I can't figure out how to avoid this:
System.js successfully bootstrapped app.
systemjs.config.js:117:9
Unhandled Promise rejection: [$injector:modulerr] Failed to instantiate module $$UpgradeModule due to: zone.js:661:17
[$injector:modulerr] Failed to instantiate module ng1Module due to:
[$injector:modulerr] Failed to instantiate module ui.grid due to:
[$injector:nomod] Module 'ui.grid' 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.
http://errors.angularjs.org/1.6.6/$injector/nomod?p0=ui.grid
[...]
See plunk: http://embed.plnkr.co/WxNwrbTXrdUHD5DU791U/
It seems that ui-grid is loaded before AngularJS. How to force the loading of ui-grid after the angularjs one?
Any idea?
UPDATE
I set up a working configuration with some tricks, mainly:
link for angularjs as first one in index.html
link to ui-grid just before the 'systemjs.config.js' one
keep a mapping for angularjs in 'systemjs.config.js':
'angular': 'npm:/angular' + version.a1,
See plunk: https://plnkr.co/edit/bEaNtHxTvlTQ0cLOdC51
But I'm quite unhappy with this last mapping of 'angularjs'. I can't figure out why it's required. Even when working with local copies of packages (i.e. with 'npm:': '../node_modules'), it's still needed, and still linked to a CDN file ...
It seems that all this occurs since version 0.20.x of SystemJS.
Did I miss something obvious? Any idea?
I trying to make an AngularJS + Angular4 Hybrid Project with Angular-CLI.
Surely i'm not alone with this approach... :)
So far I'm struggeling to include Kendo UI for JQuery in the CLI Project.
Why Kendo UI for JQuery? Because our AngularJS-Side of the Project uses it.
The Angular 4+ side would use the new Kendo UI for Angular.
This is what I did so far...
I added "../node_modules/jquery/dist/jquery.js" under scripts in the angular-cli.json file
(Because JQuery is needed to use Kendo UI for JQuery obviously)
I created a vendor.ts File and added the dependency "import '../node_modules/#progress/kendo-ui/js/kendo.all.js'"
Then i get this error:
"Module 'kendo.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."
Maybe an Angular-cli-Crack can take a look at my project and could give me some hints. Because the Kendo-Support is just disappointing...
https://github.com/dialogaal/angular-hybrid-kendo
This is common problem and Googling shows lots of instances of it, many of them on this site.
The answers seem to boil down to :
not injecting the module into the app
for getting to include the relevant JS
including things in the wrong order in index.html
I am trying to include ag-grid, following the instructions for manual include.
In my index.html, I include
Angular
ag-grid
my controller
I am using the Inspinia template, and the relevant code is
(function () {
angular.module('TapThatDashboard',
[
'ui.router', // Routing
'oc.lazyLoad', // ocLazyLoad
'ui.bootstrap', // Ui Bootstrap
'chart.js', // Charting
'agGrid'
])
})();
Note that the other stuff is working, such as the charting.
When I remove the 'agGrid' line, my app runs just fine (I have not yet added any grid to my HTML). When I add it in, I get
Module 'agGrid' is not available! You either misspelled the module name or forgot to load it
My code is far too large to post. Can anyone see what I am doing wrongly?
Please update your code like
// if you're using ag-Grid-Enterprise, you'll need to provide the License Key before doing anything else
// not necessary if you're just using ag-Grid
agGrid.LicenseManager.setLicenseKey("your license key goes here");
// get ag-Grid to create an Angular module and register the ag-Grid directive
agGrid.initialiseAgGridWithAngular1(angular);
// create your module with ag-Grid as a dependency
var module = angular.module("example", ["agGrid"]);
Reference Link : agGrid
I am trying to use angular-chart.js in my application, though i'm getting the following error:
Error: [$injector:nomod] Module 'chart.js' is not available
I have followed suggestions from other questions to include Chart.js before angular-chart.js in the html file, though this didn't work for me.
Here are the versions of the libraries i've installed:
Here is my directory structure:
app/
----libs/
------Chart.js/
----------src/
------------chart.js
------angular-chart.js/
--------dist/
----------angular-chart.js
----------angular-chart.css
--index.html
Here is the link to the libraries installed with bower in my index.html:
<!-- Import the graph library -->
<script src="../libs/Chart.js/src/chart.js"></script>
<script src="../libs/angular-chart.js/dist/angular-chart.js" xmlns="http://www.w3.org/1999/html"></script>
<!-- CSS too -->
<link rel="stylesheet" href="../libs/angular-chart.js/dist/angular-chart.css">
I am trying to inject chart.js module into my controller like so:
angular.module('DeviceCtrl', ['chart.js']).controller('DeviceController', function($routeParams, $scope, $http) { }
Any suggestions? Thanks!
The error seems to indicate that angular-chart.js is not loaded before your script is executed, you need to load it after angular and chart.js are loaded but before your script is executed.
Nit: css should be loaded at the top of the html whereas javascript files should be loaded at the bottom after the body close tag.
Can you provide a complete repro step using this template?
I'm not familiar with the angular-chart library, but I see a few issues with what you've got so far. First, the script tag for the angular-chart has a stray "xmlns" attribute that must have come from an xml document:
<script src="../libs/angular-chart.js/dist/angular-chart.js" xmlns="http://www.w3.org/1999/html"></script>
It probably isn't hurting anything, but I'd remove it just to make sure you're not giving the browser heartburn.
Next, you state
I am trying to inject chart.js module into my controller
The chart.js module only contains directives. You can't really inject it into your controller, you can only state the dependency at the module level. The readme on GitHub has a good basic setup example for this set of directives. There is one factory, ChartJsFactory, that you could inject into a controller, but it looks like it's mostly meant to be used by the directives.
The next thing I noticed is that you're including a dependency for $routeParams in the controller, but your module, DeviceCtrl, doesn't have a dependence for ngRoute included. You could either include angular-route.js, and a dependency for 'ngRoute' in the configuration of your module, or remove $routeParams.
I'm relatively new to meanstack and i'm trying to include an angular-gantt chart in a project. i have followed all the steps according to the documentation on github but i keep getting some errors. Here's a brief overview of the steps i took.
Install the angular-gantt chart using
bower install angular-gantt --save
I wiredep the dependencies using:
grunt wiredep
I added the asset/angular-gantt.js and the asset/gant.css to the config/env/all.js file generated by yo meanjs
I Include the module gantt to my Angular app modules in the publlic/config.js file
5.I also ran grunt in the angular-gantt folder to build the angular-gantt.min.js and angular-gantt.js
which i realised also included angular-gantt.js.map and angular-gantt.min.js.map
I then included the directive in my html
Finally i included the operations in my controller...
But i keep on getting the following errors
TypeError: undefined is not a function
at new controller (http://localhost:3000/lib/angular-gantt/assets/angular-gantt.js:143:43)
at Object.invoke (http://localhost:3000/lib/angular/angular.js:4118:17)
at extend.instance (http://localhost:3000/lib/angular/angular.js:8312:21)
at http://localhost:3000/lib/angular/angular.js:7564:13
at forEach (http://localhost:3000/lib/angular/angular.js:347:20)
at nodeLinkFn (http://localhost:3000/lib/angular/angular.js:7563:11)
at http://localhost:3000/lib/angular/angular.js:7824:13
at processQueue (http://localhost:3000/lib/angular/angular.js:12901:27)
at http://localhost:3000/lib/angular/angular.js:12917:27
at Scope.$eval (http://localhost:3000/lib/angular/angular.js:14110:28)
and
Error: [$compile:multidir] Multiple directives [ganttTaskProgress, progress] asking for template on: <div class="gantt-task-progress" ng-style="getCss()" ng-class="progress.classes" ng- if="task.progress !== undefined" progress="task.progress"> http://errors.angularjs.org/1.3.1/$compile/multidir?p0=ganttTaskProgress&p1…task.progress%20!%3D%3D%20undefined%22%20progress%3D%22task.progress%22%3E
at http://localhost:3000/lib/angular/angular.js:80:12
I can solve your second error. Gant has a directive called 'ganttTaskProgress' which has an attribute called 'progress'. Bootstrap has a directive called 'progress' which matches attributes. Angular therefore throws an error, as it can't apply both templates to the element. If you're not using bootstrap then have a search through your libraries and see if there's a directive called 'progress', then change its name or comment it out.