When I try to use the attribute async on my script tags, I keep getting this error:
Uncaught ReferenceError: angular is not defined
Module 'app.main' 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.
When looking on the docs, I saw the recommendation to bootstrap it manually, so I did this:
<script async type="text/javascript" src="dist/js/angular.min.js"></script>
<script async type="text/javascript" src="dist/js/app.min.js"></script>
<script async>
angular.element(document).ready(function() {
angular.bootstrap(document, ['app.main']);
});
</script>
</body>
I know async should be used when the script is at the beggining of the page, but in both situations I had the same error.
As you can see, I tried to manually bootstrap my application at the end. I also tried using that same code inside my app.min.js file, at the end of the file, but both scenarios gave me the same results.
If I remove the attr async, everything gets back to normal and work again, but how am I supposed to solve this problem?
Just so you know
Note: The async attribute is only for external scripts (and should only be used if the src attribute is present).
Thanks :)
Related
Using angularjs routing, sometimes I get
template/home.html Failed to load resource:
the server responded with a status of 404 (Not Found)
But I declared template/home.html inline
<script type="text/ng-template" id="template/home.html">
...template stuff...
</script>
Unexpectedly I don't get 404 every times, but sometimes.
I've already read this stackoverflow, where they remember this rule https://docs.angularjs.org/api/ng/service/$templateCache
Note: the script tag containing the template does not need to be included in the head of the document, but it must be a descendent of the $rootElement (IE, element with ng-app attribute), otherwise the template will be ignored.
I've declared my angularjs app without ng-app, but through bootstrap
angular.bootstrap(document, ['myapp']);
So my $rootElement is the document. Indeed I don't get the 404 errors every times. Is there some race conditions: sometimes $routerProvider is set before $templateCache is set with my inline template.
I'm using requirejs. Could it be the cause?
Any helps?
I think you may accidentally put your ng-template script outside of the tag where you define your main angular app.
<body ng-app="myApp">
// Your Template shuld stay here
<script type="text/ng-template" id="template/home.html">
...template stuff...
</script>
</body>
var app = angular.module('mittens',['ui.router','ngCookies']);
Isn't above the right way to inject ngCookies? It's throwing this error
Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.4.9/$injector/modulerr?p0=mittens&p1=Error%3A…0zc%20(http%3A%2F%2Flocalhost%3A3000%2Flibrary%2Fangular.min.js%3A20%3A274)(…)
https://docs.angularjs.org/error/$injector/modulerr?p0=mittens&p1=Error:%20%5B$injector:modulerr%5D%20http:%2F%2Ferrors.angularjs.org%2F1.4.9%2F$injector%2Fmodulerr%3Fp0%3DngCookie%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.4.9%252F%2524injector%252Fnomod%253Fp0%253DngCookie%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A3000%252Flibrary%252Fangular.min.js%253A6%253A416%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A3000%252Flibrary%252Fangular.min.js%253A24%253A186%250A%2520%2520%2520%2520at%2520b%2520(http%253A%252F%252Flocalhost%253A3000%252Flibrary%252Fangular.min.js%253A23%253A252)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A3000%252Flibrary%252Fangular.min.js%253A23%253A495%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A3000%252Flibrary%252Fangular.min.js%253A38%253A153%250A%2520%2520%2520%2520at%2520n%2520(http%253A%252F%252Flocalhost%253A3000%252Flibrary%252Fangular.min.js%253A7%253A355)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%253A3000%252Flibrary%252Fangular.min.js%253A38%253A1)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A3000%252Flibrary%252Fangular.min.js%253A38%253A170%250A%2520%2520%2520%2520at%2520n%2520(http%253A%252F%252Flocalhost%253A3000%252Flibrary%252Fangular.min.js%253A7%253A355)%250A%2520%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%253A3000%252Flibrary%252Fangular.min.js%253A38%253A1)%0A%20%20%20%20at%20http:%2F%2Flocalhost:3000%2Flibrary%2Fangular.min.js:6:416%0A%20%20%20%20at%20http:%2F%2Flocalhost:3000%2Flibrary%2Fangular.min.js:38:427%0A%20%20%20%20at%20n%20(http:%2F%2Flocalhost:3000%2Flibrary%2Fangular.min.js:7:355)%0A%20%20%20%20at%20g%20(http:%2F%2Flocalhost:3000%2Flibrary%2Fangular.min.js:38:1)%0A%20%20%20%20at%20http:%2F%2Flocalhost:3000%2Flibrary%2Fangular.min.js:38:170%0A%20%20%20%20at%20n%20(http:%2F%2Flocalhost:3000%2Flibrary%2Fangular.min.js:7:355)%0A%20%20%20%20at%20g%20(http:%2F%2Flocalhost:3000%2Flibrary%2Fangular.min.js:38:1)%0A%20%20%20%20at%20db%20(http:%2F%2Flocalhost:3000%2Flibrary%2Fangular.min.js:41:272)%0A%20%20%20%20at%20c%20(http:%2F%2Flocalhost:3000%2Flibrary%2Fangular.min.js:19:463)%0A%20%20%20%20at%20zc%20(http:%2F%2Flocalhost:3000%2Flibrary%2Fangular.min.js:20:274
app.controller('HomeController',['$scope','$http','$cookies',function($scope,$http,$cookies) {}
You misspelled ngCookies as ngCookie in your real code but corrected it for the question.
Did you click on the admittedly rather long URL?
That will tell you:
Failed to instantiate module mittens due to:
and then another link which tell you:
Failed to instantiate module ngCookie due to:
and then another link which takes you to:
Module 'ngCookie' 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.
Each of these is accompanied by a stack trace, but the descriptions I've quoted at the top really say it all. ngCookie is not available because either you forgot to load the javascript or you misspelled its name.
Now there seems to be some confusion here as your question says you asked for 'ngCookies', but the error message says 'ngCookie' was not found. Check that you didn't autocorrect a misspelling of the name when you posted the question.
Because you forget to load the angular cookies file. Load th file first and then try.
<script src="path/to/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-cookie/4.0.0/angular-cookie.js"></script>
Finally, load the module in your application by adding it as a dependent module:
angular.module('app', ['ngCookies']);
With that you're ready to get started!
Make sure you have refereed library
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-cookies.js" type="text/javascript"></script>
Make sue you have injected the dependency
var miAp = angular.module('miAp', ['ngCookies']);
DEMO
I am trying to inject alasql so that I can export a table into xlsx sheet. I found AlaSQL as a solution and refered [http://jsfiddle.net/agershun/00nfeq12/][1] . This is the easy solution to my project. But on injecting
//controller.js
var App = angular.module("application", [ 'ngRoute','ngCookies','alasql']);
I get an error:
angular.js:6 Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.4.7/$injector/modulerr?p0=Application&p1=Erro…3A%2F%2Flocalhost%3A5436%2FIAt_cloud%2Fjs%2Fshared%2Fangular.js%3A19%3A463)
I have included all the js files in the main Home page.
//Home.html
<script src="js/shared/angular.js"></script>
<script src="js/shared/angular-route.js"></script>
<script src="js/shared/angular-cookies.js"></script>
<script src="http://alasql.org/console/alasql.min.js"></script>
<script src="http://alasql.org/console/xlsx.core.min.js"></script>
<script src="js/user/controller.js"></script>
Can alasql be used in controller in any other way? Help me out please.
You don't need to inject it like that.
Simply add both the alasql.min.js and xlsx.core.min.js to your html as you have.
However I the correct path for the alaqsl one is /dist/alasql.min.js not console/alasql.min.js. That one is only applicable to the xlsx.core.min.js.
From https://github.com/agershun/alasql/wiki/Angular.js
Please include the file normally and not via requireJS
So please include it without alasql in angular.module(... and use the CDN for AlaSQL to make sure the path does not change:
<script src="http://cdn.jsdelivr.net/alasql/0.3/alasql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.12/xlsx.core.min.js"></script>
I'm having a really hard time trying to make modules working on an app I'm building.
This is the main file
main.js
'use strict';
angular.module('clientPortalPublic',[
'ngCookies',
'ngResource',
'ngAnimate',
'clientPortalPublic.components'
]);
angular.module('clientPortalPublic.components',[]);
And I have another file switch-login-effect.js
'use strict';
angular.module('clientPortalPublic.components').directive('switchLoginEffect',['$timeout', function($timeout){
//Content removed for clarification
}]);
The order that those files are being loaded is:
<script type="application/javascript" src="public/components/switch-login-effect.js"></script>
<script type="application/javascript" src="public/main.js"></script>
I know the switch-login-effect.js should be loaded later, since is requiring the main module, but it's being loaded dynamically and I don't control the order. BUT using manual bootstrapping shouldn't angular deal with it?
This is how I'm bootstrapping it
angular.element(document).ready(function() {
angular.bootstrap(document, ['clientPortalPublic']);
});
If I run the code above I get:
Error: [$injector:nomod] Module 'clientPortalPublic.components' 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.
Thanks!
You are declaring a directive on a non-existant module when switch-login-effect.js loads first. It looks like you are trying to dynamically control what elements are included in the clientPortalPublic.components module simply by adding or removing scripts, but I don't think angular's dependencies are set up for that. A main reason to have those dependencies is to know exactly what you are getting.
The clientPortalPublic.components module should be defined in one script file if possible. If you have various components you can create different modules for each, but the definition of your application module should know what it is getting by the dependencies it requires. That would cause debugging headaches for one reason, "Why is my directive not working? I'm loading the components module..." (but you missed a script file you have no way to know that you need)
I really don't advise creating your app this way, but if you are dead-set you could catch the error and create the module at the start of each individual component file (and in your main.js in case you don't actually have any components but still want to require the module) so it doesn't matter which one is loaded first:
try {
angular.module('clientPortalPublic.components');
} catch (err) {
angular.module('clientPortalPublic.components',[]);
}
Or more simply just uses javascript to see if it's been executed:
var componentsModule = componentsModule ||
angular.module('clientPortalPublic.components',[]);
After reading some angular good practices and paying more attention to angular seed, I have it working.
THe thing is that they recommend to do the following when you have an structure similar to:
app/
app/components
app/components/component1
app/components/component2
app.js => angular.module('main',['main.components']);
app/components/components.js => angular.module('main.components',['main.components.component1', 'main.components.component2']);
app/components/component1.js => angular.module('main.components.component1',[]);
app/components/component2.js => angular.module('main.components.component2',[]);
Having that structure make sense and works perfectly.
:)
Preface: As I am new to both AngularJS and Brunch, I want to learn the basics and build and app from scratch (i.e. from the dead-simple Brunch skeleton). I am well aware that there exist skeletons that specifically deal with bootstrapping an AngularJS/Brunch app and I have been studying their code in order to find out what "makes them work". But being the newbie I am, I don't see the solution to my problem...
The Problem: As long as I add ng-app (without any value) to the html element, AngularJS works just fine. But as soon as I add a value (i.e. ng-app="MyApp") to this attribute, AngularJS stops working. The console in Chrome tells me that it encountered an "Uncaught object" in line 1695 of angular.js.
It seems that the javascript added by Brunch is causing this: If I remove the code at the very top generated by Brunch in the app.js file of the public folder, again it works. But clearly that can't be the solution to my problem.
Here is the code of my app/assets/index.html:
<html ng-app="myApp">
<head>
<title>Test</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
That's the code in my app/app.coffee (which is concatenated with Brunch and AngularJS code in the resulting public/app.js):
angular.module("myApp", [])
The question: What am I missing? I see that in the specific skeletons the index.html file contains a <script>require('MyApp')</script>, but adding it doesn't solve the problem.
Any hint for a Brunch-rookie like me is very appreciated. Thanks!
Okay, I finally figured it out. Indeed there needs to be the additional <script>require('app');</script> snippet. However, make sure the parameter for this require() call matches the file name in which your Angular application is created.
Example:
Your HTML tag uses ng-app="myAwesomeApp". The corresponding Javascript code needs to reference that with angular.module("myAwesomeApp", []).
If your Javascript file (in which the Angular module is created) is simply called app.js, then the corresponding <script>require('app');</script> should reflect that. If you also choose to name your Javascript file myAwesomeApp.js, then match it with <script>require('myAwesomeApp');</script>.