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
Related
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?
Am using AngularJS v1.6.4 for my node app
later i hv installed angular-file-upload from npm
when ever i add angular.module name 'angularFileUpload' it get's ( master.js:26 Uncaught Error: [$injector:modulerr] )
master.js is collection of js (jquery,angular,slimscroll,toaster etc..);
var LifeApp = angular.module('LifeApp',['ui.router','ngRoute','ui.grid','ui.grid.selection','angularFileUpload']);
once i start the node app Uncaught Error: [$injector:modulerr] found.
Have you required/imported the module? Installing a package only adds it to the node_modules folder, after that you need to require it inside your application like require("angular-file-upload");.
I have a ngDraggable.js library in my node_modules folder which must be included as dependency as follows:
import draggable from 'ngDraggable';
ngDraggable.js doesn't have exports so I used the work around from some SO answer which I cannot find any more. It was suggested to use an index.js file withing the same folder, which would import ngDraggable.js and export it. For some reason this file was lost and I can't remember that 2 lines of code doing this:( I tried this, but it doesn't work at all:
import ngDraggable from './ngDraggable';
export default angular.module('ngDraggable', [ngDraggable]);
Error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module {"default":{"default":{"_invokeQueue":[],"_configBlocks":[],"_runBlocks":[],"requires":[{}],"name":"ngDraggable"}}} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
http://errors.angularjs.org/1.6.1/ng/areq?p0=module&p1=not%20a%20function%2C%20got%20Object
at http://localhost:3000/index.js:17216:12
Where 'app' is the main module representing the application and "default" must the module that imports ngDraggable and exposes it for main module
I found the copy of missing file. Here's the code snippet
require('./ngDraggable.js');
module.exports = 'ngDraggable';
you can try
import * as draggable from 'ngDraggable';
I am using ng-joyride for the first time.
I did bower install ng-joyride --save. And included it in my modules along with other modules like :
angular.module('some', [ 'ionic','ngJoyRide','ui.router',])
And now I am not able to see the view part of my app. And the console says
Uncaught ReferenceError: jQuery is not defined
and
Uncaught Error: [$injector:modulerr] Failed to instantiate module XYZ due to:
Error: [$injector:modulerr] Failed`enter code here` to instantiate module main due to:
Error: [$injector:modulerr] Failed to instantiate module ngJoyRide due to:
Error: [$injector:nomod] Module 'ngJoyRide' 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.
But before including ngJoyRide, I didn't get any issue with Jquery.
script tag with jquery in my index.html looks like :
<script src="bower_components/jquery/dist/jquery.js"></script>
I sense this might be a very silly mistake done by me. But not sure where I went wrong, help is much appreciated.
Thanks in advance.
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