I'm trying to get angularjs working with jquery datatables, i'm using the samples found here:
https://l-lin.github.io/angular-datatables/#/angularWay
I've included the required scripts, but when I update my module to include datatables I get an error:
var testModule = angular.module("testModule", ['ngResource', 'ngRoute', 'ngSanitize', 'datatables']);
I get the following error:
Uncaught Error: [$injector:modulerr]
This error occurs when a module fails to load due to some exception. The error message above should provide additional context.
A common reason why the module fails to load is that you've forgotten to include the file with the defined module or that the file couldn't be loaded.
removing the 'datatables' from there and it works but without datatables. I've included the below scripts in the following order:
jquery.min.js
jquery.dataTables.min.js
angular.min.js
angular-datatables.js
test-module.js
In the examples I don't see anything to indicate where the datatables would come from it not from the angular-datatables.js file.
it looks like "datatables" module may not have been registered. How are you loading you JS files ?
Related
I probably have problem with webpack configuration, because the require() method in AngularJS DI doesn't work correctly. In my app use AngularJS, Webpack and ES6.
I'm trying to add a library angular-formly-templates-bootstrap. In the source code on GitHub I see the dependency added with:
const ngModule = angular.module(ngModuleName, [require('angular-formly')]);
After installing the library using Npm in the file I can see:
var ngModule = angular.module(ngModuleName, [__webpack_require__(4)]);
Unfortunately, firing this code returns me an error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module formlyBootstrap due to:
Error: [$injector:modulerr] Failed to instantiate module {"version":{"full":"1.6.9","major":1,"minor":6,"dot":9,"codeName":"fiery-basilisk"},"callbacks":{}} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
I can quickly fix the error by entering the dependency name in the library code:
var ngModule = angular.module(ngModuleName, ['formly']);
At this point, everything works as it should. Obviously, this is not the right solution. The only question is why the require() method doesn't properly inject dependencies?
Require doesn't work in browser.Basically require is a node_module by which we can access other modules or files.So please if you are using it on browser side then try other things like import or self.import or injecting.
Add this to your project: require.js
and take a look at this Require Api
I already use Angular JS 1 in my projects and always works.
But I recieved one project that is using python and django and some pages are using angular, the page that I need to work have no angular code, then I put the call for the main script:
<script src="/static/angular/1.5.5/angular.min.js"></script>
And I get the following error:
Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=public&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.5%2F%24injector%2Fnomod%3Fp0%3Dpublic%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A6%3A412%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A25%3A235%0A%20%20%20%20at%20b%20(http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A24%3A282)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A25%3A20%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A39%3A374%0A%20%20%20%20at%20q%20(http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A7%3A355)%0A%20%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A39%3A222)%0A%20%20%20%20at%20bb%20(http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A43%3A246)%0A%20%20%20%20at%20c%20(http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A21%3A19)%0A%20%20%20%20at%20yc%20(http%3A%2F%2Flocalhost%3A8000%2Fstatic%2Fangular%2F1.5.5%2Fangular.min.js%3A21%3A332)
Note: I have created nothing yet, nor app.js neither controller.js
I changed for the angular no minified and the error is more especific:
Error: [$injector:nomod] Module 'public' 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 for any suggestion
I discovered what happened, someone write in a hide pag a ng-controller="public". for this, angular was saying no have this controller.
after following the instructions here
https://github.com/fraywing/textAngular/
1) added the script tag with textagnular js file.
2)In my app definition which was
var myApp_ = angular.module('myApp', [ 'ui.bootstrap', 'ngResource']);
I changed it to
var myApp_ = angular.module('myApp', [ 'ui.bootstrap', 'ngResource' , 'textAngular']);
I get
Uncaught Error: [$injector:modulerr] > Failed to instantiate module textAngular.
This error occurs when a module fails to load due to some exception.
What else am I missing?
It has some additional requirements. angular sanitize module, which is separate file.
You may download it from here
Include (textAngularSetup.js along with textAngular.js) or just textAngular.min.js
(textAngularSetup.js is included inside textAngular.min.js)
Check https://github.com/fraywing/textAngular/#requirements
If you use the minified version of textAngular that already links to it's sanitation module and you don't need to include a extra link (at least for the version I got via the bower packet manager).
Make sure that you include de textAngular-xxx.js below the include of angular.js in your html.
//index.html
<html ng-app="app">
//app.js
angular.module('app', 'test-module')
If I don't register the test-module in any of my scripts like below:
angular.module('test-module', [])
I will get errors below in brower and the whole website will not be loaded:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module test-module due to:
Error: [$injector:nomod] Module 'test-module' 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.
Q: How to ensure the website page will be loaded even through there are any unknown modules loaded errors ?
I think you should look on this problem from other side.
If you use test-module (module for testing) you in development process. You could configure your backend for work in several environments. For example dev, test and prod. You can handle sub domain and decide on backend which modules need to be loaded. dev.yourdomain.com (for dev environment), yourdomain.com (for production environment) and test.yourdomain.com (for tasting).
You can generate such script:
<script type="text/javascript">
var MyModules = ['test-module'];
</script>
And handle it so:
angular.module.apply(angular, 'app', MyModules);
I found solution to you answer :)
Angular have array of requires for each module, so you can easily push some requires if you want to use this module.
In your case you can do this
//index.html
<html ng-app="app">
//app.js
angular.module('app', [])
//test-module.js
angular.module('test-module', [])
angular.module('app').requires.push('test-module');
So if you load test-module.js to your browser, you automatically inject dependency to your app.
Trying to use the Angular $resource, and its coming back as not a method. Looking through the sparse documentation, I was able to find this :
angular.module('productServices', ['ngResource']).
That you're supposed to include it in your app module. Fair enough, I throw it in and get :
Uncaught Error: No module: ngResource
Hmm.. does this not come with Angular.js and its a separate plugin?
It's a separate file that you'll need to include in your project, as of version 1.0.0rc3 (see changelog on GitHub).
Head over to http://code.angularjs.org -- under the folder for any version after this release, you should see the angular-resource.js file available for download and inclusion in your project.