SCRIPT5022: Argument 'module' is not a function, got undefined angular.js, line 975 character 5 - angularjs

I am facing below exception in IE-8 when I am loading the angular related page. It works fine in other browsers. Any specific reason?
SCRIPT5022: Argument 'module' is not a function, got undefined
angular.js, line 975 character 5

I had this same issue (when on IE < 9) and it took me forever to track it down...
angular.module('app', ['app.directives', 'app.filters', 'app.services', ]);
Note the trailing comma after 'app.services'.

I get errors like that when I try to inline end the script tag causing IE to not load all my scripts. Check if you have end tags for all your script includes.
To illustrate:
<script src="js/services.js"></script>
<script src="js/controllers.js"/> <!-- THIS IS A PROBLEM FOR IE -->
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/myApp.js"></script>
On IE9 this will result in:
SCRIPT5022: No module: myApp.filters
angular.min.js, line 17 character 195
Not entirely the same, but I can't test it on IE8. On Chrome however, this works perfectly. The weird thing about this, is actually the thing it can't seem to find, is in the script following the one with the inline ending. I can't really explain that.
Now, when I close the script tag like this:
<script src="js/services.js"></script>
<script src="js/controllers.js"></script> <!-- THIS WORKS -->
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/myApp.js"></script>
It works like a charm.
To sum it up, AngularJS tries to find your module called 'module', but is not able to find it. Probably due to a script that is not loaded. Try to find a script tag which closes inline, and end it as descibed above.
Hope that helps.

Another thing that might cause this is using keywords for object properties. I had three modules with the error above:
statistic.import = !statistic.import;
default: $scope.newGrid.default
$scope.data = JSON.stringify({export: exportParams})
The offending properties being import, default and export.

I don't know if you're still walking around same problem, but i've found up a possible cause:
when you declare any angular module you must inject dependences some like this:
angular.module('MyStore', ['ng','ngRoute']);
if you need invoke that module from another place to perform any action you probably mismatch if you attempt to inject dependences again... then you must call it by its name like this:
angular.module('myStore')
otherwise you will exploit your brain looking for the solution.
I hope it helps!

Related

Months and Days are not being translated

I am trying to translate a FullCalendar using the language file included in the package. To make it simpler with angular, I use the plugin ui-calendar.
To do so, I imported the language script as described in the doc :
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
... //other includes generated by bower
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/fullcalendar/dist/fullcalendar.js"></script>
<script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- FullCalendar language pack -->
<script src="bower_components/fullcalendar/dist/lang/fr-ca.js"></script>
However, the months and the days are not being translated. I did managed to translate the labels manually using the "monthNames", "dayNames", etc configs, but IMO that's ugly and it doesn't translate the ui.bootstrap.datepicker.
From what I understand, the problem is momentjs who wont take anything I give him. I tried to do a 'moment.lang('fr-ca')' but it doesn't do much. Anyone know a "Mickey Mouse trick" that could help to fix this issue?
Note: ui-calendar uses the v 1.6 of fullcalendar which doesn't include the languages utilities. So I added fullcalendar#2.1.0 to my bower.json. Everything seams to be working properly, I don't see where this could mess up the language since I'm calling fullcalendar directly.
Here is a working plunkr: http://plnkr.co/edit/AFpj79M1C6vOewSWLX8J
You also need to localise angular, you can read the doc here: https://docs.angularjs.org/guide/i18n
To make it work I added the code of i18n/angular-locale_fr-ca.js in the plunkr file ng-fr-ca.js.
Looking at the source of ui-calendar (line 179), you will see it uses anggular $locale service to translate days, month, etc. I have added a console.log to the source so you can see the difference between
var dtf = $locale.DATETIME_FORMATS;
console.log(dtf);
$locale uses engglish by default. If you load one of the i18n locale file, you will have it translated.

What do I need to include that angular bootstrap just simply works

I have included these in my index.html because bower is including them:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- 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-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
Why is the ui-bootstrap.js not included? Because the bower.json from bootstrap and its main property has set "ui-bootstrap-tpls.js" but what about the ui-bootstrap.js?
Even when I include the file outside of the bower:js tags the popover from the datepicker is not visible and I get NO errors in my google chrome.
But when I click on the datepicker button no popover...
UPDATE
Now that I corrected my angularjs modules, now I use just this: 'ui.bootstrap.datepicker'
I get now these errors in google chrome:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/template/datepicker/datepicker.html
Error: [$compile:tpload] Failed to load template: template/datepicker/datepicker.html
When I look at the source ui-bootstrap-tpls.js file:
.directive( 'datepicker', function () {
return {
restrict: 'EA',
replace: true,
templateUrl: 'template/datepicker/datepicker.html',
scope: {
datepickerMode: '=?',
dateDisabled: '&'
},
Where are these above path template... ? I have them not here. I just installed the angular-bootstrap bower package. Should there not all be included?
UPDATE2
I get these angularjs error now:
See the parent is null and therefore the parent.InsertBefore can not work and throws the exception...
Official Doc
ui-bootstrap-tpls.js library contains the directives and the directive templates.
ui-bootstrap.js is just the directives and you are expected to supply the directive templates.
Most folks use the predefined directive templates (ui-bootstrap-tpls.js). You do not want to include both and that may be why the popover/datepicker is not working. You would essentially have 2 directives working to show/hide the popover/datepicker. Also, do not load the bootstrap.js library as that will cause the same problems.
UPDATE:
In regards to the template not found error, the datepicker directive is looking for the template 'template/datepicker/datepicker.html' in the $templatecache. The ui-bootstrap-tpls.js injects the templates into the template cache at the very end of the js file.
In the ui-bootstrap-tpls.js file you should see several $templatecache.put lines with 'template/datepicker/datepicker.html' being one of them.
Just in case someone else is having the same issue: I was having problems with the datepicker, and the issue was that I was loading the templates before the base JS:
From:
<script src="/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="/Scripts/angular-ui/ui-bootstrap.min.js"></script>
To:
<script src="/Scripts/angular-ui/ui-bootstrap.min.js"></script>
<script src="/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
I just ran into this issue also, the answers above helped me a lot!
In my instance I was using a yo-angular build, and installed ui-bootsrap with bower. The problem was multiple references to ui-bootrap and bootstrap conflicting with the tpls.js verison
Here is my solution:
Simply put within my index.html
Remove
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
Add
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
Problem:
This questions comes up as a Google result for
Error: [$compile:tpload] Failed to load template: templates/datetimepicker.html
This may not be a direct answer to your specific problem, but I wanted to leave a note for future users encountering similar problems.
The directive daleotts/angular-bootstrap-datetimepicker introduces a breaking change in v1.0.0:
must include datetimepicker.template.js in the page to load the
template.
(b520f515)
Solution:
Users of angular-bootstrap-datetimepicker can either roll back to a previous version (such as v0.40), or choose to include templates file that was previously included in the base .js file:
// Previously this was the needed file
<script type="text/javascript" src="node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.js"></script>
// Users who wish to use the default datetimepicker templates must now also include this file
<script type="text/javascript" src="node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.templates.js"></script>

trouble getting angular-google-maps to work

I'm new to MVCs and Angular and I tried to get angular-google-maps going by following the steps in the AGM QuickStart page. Firebug shows several errors, some of which I don't understand.
First, I get a 403 in accessing underscore. The message (minus localhost) is:
"NetworkError: 403 Forbidden - angular-oPast/app/..../node_modules/underscore/underscore-min.js" Why can't I access code that's in my own PC?
Second, I get SyntaxError: missing } after property list }; with some reference to ngLocale, which is not in my code.
Third, I get ReferenceError: _ is not defined with some reference to MarkerLabel, which I am not using.
Fourth, I get [$injector:nomod] Module 'residenceApp' is not available! This is the name of the overall Angular app. Despite having done a couple tutorials, I don't know how to build this for using AGM or where to put it.
Fifth, per the AGM QuickStart, I have the following in my CSS
.angular-google-map-container {height:400px;}
This is a puzzle because the instructions say nothing about creating an HTML class=".angular-google-map-container" I did not put an HTML class attribute in like that because there were no instructions to do that. What is that CSS doing, and is it correct for my situation?
My HTML using ng looks like:
<html lang="en" data-ng-app="residenceApp">
<div id="gMapCanvas" data-ng-controller="GMapController2">
<google-map center="map.center" zoom="map.zoom"></google-map>
</div>
Most of the rest of the HTML is mock up text, at this point.
My scripts look like:
<script src="..../node_modules/underscore/underscore-min.js"></script>
<script src="common/gmapGenerator2.js"></script>
<script src="common/mapGenerator/dist/angular-google-maps.min.js"></script>
Maybe I should say that example.html for AGM works in my PC. So I have the necessary code in the system. It just doesn't have dependencies set right, or something.
What do I need to do to fix these problems and get Google Maps working? I can provide more info, if necessary.

Error using bsCheckboxDirective (AngularStrap)

I'm receiving this error trying to use the bsCheckboxDirective of AngularStrap:
error/$injector/unpr?p0=$$animateReflowProvider%20<-%20$$animateReflow%20<-%20bsCheckboxDirective
I suppose I'm missing some requirement but...
Well, I ran out of ideas right now. Does anyone saw it before? Any tips?
I haven't seen this $$animateReflow defined anywhere though...
Make sure you included all scripts listed in the quick start guide. Specifically, angular-animate must be included to supply the animateReflow service.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-animate.min.js"></script>
<script src="//rawgithub.com/mgcrea/angular-strap/master/dist/angular-strap.min.js"></script>
<script src="//rawgithub.com/mgcrea/angular-strap/master/dist/angular-strap.tpl.min.js"></script>

How to use a file from Ext.example

I went through the docs to find for a Ext.example.msg but, i am unable to find it.
According to this example, they have successfully used Ext.example.msg. How is this ?
I had another question on SO which is related to this.
UPDATE
I am trying to use the following code in my application;
Ext.example.msg('Button Click', 'You clicked ta button');
When i execute the code, i get an error saying TypeError: Ext.example is undefined .
To overcome this error i did the following;
1.) added <script type="text/javascript" src="app/extjs/examples/shared/examples.js"/> in my app.html file
2.) added the following in my app.js file
Ext.Loader.setPath('Ext.example', 'app/extjs/examples/shared');
Ext.require(['Ext.container.Viewport',
'Ext.example.*']
);
None of the above methods works, i still get the same error message.
My project folder structure is as follows;
Project_Name
->app (folder)
--> app.html
--> app.js
--> extjs
---> examples
---->shared
----->example.js
When you include your js script in you index.html, as you did in 1:
<script type="text/javascript" src="app/extjs/examples/shared/examples.js"/>
You no longer need loader or to require it - you have explicitly included it and it is clear the script content will be in scope.
It appear to me your path is incorrect: There's no app/extjs and it would make sense to have the extjs folder as sibling to that of your app. Thus this should work:
<script type="text/javascript" src="extjs/examples/shared/examples.js"/>

Resources