I've installed angular-formly-templates-bootstrap via bower on a project that I've been working on. But when I try to inject it in angular, I receive the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module bandar due to:
Error: [$injector:modulerr] Failed to instantiate module formlyBootstrap due to:
Error: [$injector:nomod] Module 'formlyBootstrap' 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.4.1/$injector/nomod?p0=formlyBootstrap
at http://localhost:3000/bower_components/angular/angular.js:68:12
at http://localhost:3000/bower_components/angular/angular.js:1949:17
at ensure (http://localhost:3000/bower_components/angular/angular.js:1873:38)
at module (http://localhost:3000/bower_components/angular/angular.js:1947:14)
at http://localhost:3000/bower_components/angular/angular.js:4355:22
at forEach (http://localhost:3000/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:3000/bower_components/angular/angular.js:4339:5)
at http://localhost:3000/bower_components/angular/angular.js:4356:40
at forEach (http://localhost:3000/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:3000/bower_components/angular/angular.js:4339:5)
The problem is, bower doesn't load angular-formly-templates-bootstrap in the browser. There are some other packages which are being loaded to the browser with bower. But I don't know what the problem is with formlyBootstrap.
Are you using gulp for inject bower dependencies? If so, find in gulp config something like that
exports.wiredep = {
exclude: [/bootstrap.js$/, /bootstrap-sass-official\/.*\.js/, /bootstrap\.css/],
directory: 'bower_components'
};
So all files ended with 'bootstrap.js' not injected. You can chage it with something like that
exports.wiredep = {
exclude: [/[^-]bootstrap.js$/, /bootstrap-sass-official\/.*\.js/, /bootstrap\.css/],
directory: 'bower_components'
};
Got the same error. I was working with gulp angular generator which seems to be ignoring formly bootstrap. I changed the main file in bower_components for angular-formly-bootstrap-template to dist/...bootstrap.min.js. Started working after that. Seems like the generator was ignoring files having bootstrap.js at the end
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 try to use angular-google-analytics for tracking traffic. I'm using angular 1.4.8.
Version of angular-google-analytics is 1.1.9. I included it in my bower.json file and linked script in my template.razr file as a showed below:
<script src='bower_components/angular-google-analytics/dist/angular-google-analytics.min.js'></script>
In main module of the app I did dependency injection as below in my .coffee file:
app = angular.module('speedUpApp', [
'angular-google-analytics',
'ngAnimate'
'ngCookies'
'ngSanitize'
'ngTouch'
'pascalprecht.translate'
'ui.router'
'ngMaterial'
'ngMap'
'slick'
'nl2br'
'lodash'
'angular-images-loaded'
'ui.select2'
'angular-iscroll'
'smoothScroll'
'angular-inview',
'dibari.angular-ellipsis'
'ngFileUpload'
])
First dependency is just angular-google-analytics. In spite of those steps after running my local server in my browser console I receive an error:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module speedUpApp due to:
Error: [$injector:modulerr] Failed to instantiate module angular-google-analytics due to:
Error: [$injector:nomod] Module 'angular-google-analytics' 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.
Now I cannot recognize the problem, because I declared the angular-google-analytics module dependency and dependency injection too, despite of it, I still encounter this error. Any help?
I am trying to implement show more show less functionality in my project using angular. Following are the versions of angular, bootstrap and jQuery in my project.
"angular": "^1.6.0",
"bootstrap": "^3.3.7",
"jquery": "2.2.4"
I have added the bower component to add this functionality. I ran following command:
bower install angular-read-more --save
I have also included the JS files.
Then I added module to the app:
angular.module("app", ["hm.readmore"]);
When I am running the project, I am getting error in browser console:
Uncaught Error: [$injector:modulerr] Failed to instantiate module regulationLibraryApp due to: Error: [$injector:modulerr] Failed to
instantiate module hm.readmore due to: Error: [$injector:nomod] Module
'hm.readmore' 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.
Where I had mistaken? Is there any other easy way to implement this functionality?
Looks like your bower dependencies are not loaded before angular application is bootstrapped.
Load your bower dependencies before you load angular app.
For example
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-read-more/readmore.min.js"> </script>
<script src="/my_angular_app/app.js"></script>
You're probability missing ngAnimate dependency.
To get it work 'hm.readmore' uses: ngSanitize, ngAnimate both plugins.
So, you can download it from npm repository https://www.npmjs.com/package/angular-animate
I used with my project this plugin angular-multi-select-tree in github.
This is the way I included it to my project:
installed from bower bower install angular-multi-select-tree -save
after this I got string in bower.json :
"angular-multi-select-tree":"*"
And add to index.js "multi-select-tree"
angular.module('xyzApp', ['multi-select-tree', '....']);
After run "Gulp serve" webpage doesn't work, i saw this error in console
Error: [$injector:modulerr] Failed to instantiate module multi-select-tree due to:
Error: [$injector:nomod] Module 'multi-select-tree' 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.
How can i fix this error? Or which plugin that can be used? necessary functionality:
Dropdown list
search drop-down list
multi select
grouping
Example:
Try the isteven-multiselect here is the link;
https://github.com/isteven/angular-multi-select
I have a module that is defined as this:
var angular_multi_select_engine = angular.module('angular-multi-select-engine', [
'angular-multi-select-constants'
]);
The engine depends on the constants module, as you can see.
I'm trying to run some tests on the engine, with this:
beforeEach(function() {
angular.mock.module('angular-multi-select-engine', 'angular-multi-select-constants');
});
But when I try to run jasmine, it says:
Error: [$injector:modulerr] Failed to instantiate module angular-multi-select-engine due to:
[$injector:nomod] Module 'angular-multi-select-engine' 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.
If I try to load only the constants module, Jasmine works as expected and I can test the values of the constants module.
How should I load a module that has a dependency?
It turns out Jasmine is not loading the engine module because I have used ES6 syntax. I'll open a new question about that.