We Keep Coding

Webpack doesn't add dependencies in AngularJs using the require() method

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

"Restangular" Error: $injector:modulerr Module Error

I try to make authorization in my app with angular.
I created app.service and injected "Restangular". And i have this error
Error: $injector:modulerr Module Error Failed to instantiate module cadastral due to:
Error: $injector:modulerr Module Error Failed to instantiate module Restangular due to:
Error: $injector:nomod Module Unavailable Module 'Restangular' 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.
I included all files in my html page
script src="/app/app/core/js/angular.js" type="text/javascript"
scrip src="/app/app/core/js/angular-resource.js" type="text/javascript"
script src="/app/app/core/js/angular-route.js" type="text/javascript"
script src="/app/app/core/js/restangular.js" type="text/javascript"
This is my app code
var app = angular.module('cadastral', ["ngRoute","ngResource",'ngCookies',"Restangular"]);
app.controller('authCtrl', function($scope,$http,$routeParams,AuthService,$cookies){
/**/
});
Ant this is AuthService:
app.service('AuthService', function($cookies, $http, Restangular) {
/**/
});
Can somebody help me?
what's problem?

when you inject a third party module into your project module you should send module name as parameter...
In your case you are injecting Restangular which is not the module name for restangular change it to restangular and you should be fine...
Restangular is the name of its service not module...

Failed to instantiate module ngJoyRide

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.

Failed to instantiate module formlyBootstrap

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

How to avoid or skip module load error in Angular.js?

//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.