angular.module is not a function

[vishalrajole]

I am using

Angular 1.3.13
Webpack 1
Node 6.2.1

Steps to reproduce

1. Install slider using bower bower install --save angularjs-slider and installed
   "angularjs-slider": "^6.4.0"
2. Include bower dependency as

require('bower_components/angularjs-slider/dist/rzslider.min.css');
require('bower_components/angularjs-slider/src/rzslider.js');

3. Include 'rzModule' into angular module dependancy as

angular.module('myApp', [
        'ngMessages',
        'ngAnimate',
        'ui.router',
        'angularFileUpload',
        'textAngular',
        'ui.bootstrap',
        'rzModule'
    ])

Demo: http://jsfiddle.net/cwhgLcjv/ (fork this example and update the link)

Expected behaviour

It should load angular-slider dependancy

Actual behaviour

Getting "angular.module is not a function" error while initializing it. Attaching screenshots

[vishalrajole]

Since I am using webpack, below checks always returns true and defines its angular obj

if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['angular'], factory);
  }

@rzajac above code causing a problem. @ValentinH

[dackmin]

@vishalrajole did you try to require the minified version of the script ?

[vishalrajole]

@dackmin yes, I tried with the minified version as well. Still no luck

[graingert]

@vishalrajole have you tried using yarn instead of bower?

[wiggitamoo]

I am also seeing an error loading rzModule. I'm using bower and grunt to build. It works in development, but I see the following errors after I build.

Error: [$injector:modulerr] Failed to instantiate module rzModule due to:
Error: [$injector:nomod] Module 'rzModule' 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 am using

Angular 1.6.8
Node 8.2.1
angularjs-slider: "^6.5.0"

[graingert]

@wiggitamoo have you tried using yarn instead of bower and webpack instead of grunt?

[wiggitamoo]

Hey @graingert, yarn vs bower are the tools for downloading the code. I wouldn't compare yarn to grunt. The code works in development, but fails to compile when running grunt build.

My current workaround is using the CDN to the rzslider.min.js. However, the CDN only has access to the older versions.

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/6.4.3/rzslider.min.js"></script>

The latest version is not available

https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/6.5.0/rzslider.min.js

It may need some updating.

[graingert]

I wouldn't compare yarn to grunt.

neither would i, why do you bring that up?

@wiggitamoo can you answer my question: have you tried using yarn instead of bower and webpack instead of grunt?

[wiggitamoo]

@graingert, thanks for your response. I had misinterpreted your prior statement. Sorry for the misunderstanding. Unfortunately, I don't have the ability in my current project to make that change to test the build.

[ValentinH]

Closing for clean-up. Please comment to re-open if needed.

[alonagar]

I am having the same problem

Webpack 4.35
Node 8.9.1
Angularjs 1.5.11

when using Webpack getting:
rzslider.js:20 Uncaught TypeError: angular.module is not a function
at Object.eval (rzslider.js:20)
at eval (rzslider.js:14)
at eval (rzslider.js:17)
at Object../node_modules/angularjs-slider/dist/rzslider.js (dependencies.bundle.js?v=21062019:162)
at webpack_require (dependencies.bundle.js?v=21062019:20)
at eval (dependencies.js:20)
at Module../src/dependencies.js (dependencies.bundle.js?v=21062019:230)
at webpack_require (dependencies.bundle.js?v=21062019:20)
at dependencies.bundle.js?v=21062019:84
at dependencies.bundle.js?v=21062019:87

can't get over this problem....

[vnctaing]

Using webpack, I've fixed my issue by removing an existing <script src="path/to/rzslider">. I've made sure I was loading angularjs-slider after window.angular is set.

Note: I'm using node require() module format for technical constraint (Legacy code that doesn't pass strict mode thus the babel-loader, but that's another issue...)

This worked for me:

require("angularjs-slider");
require("angularjs-slider/dist/rzslider.css")



var app = angular.module('MyApp', [
    ...,
    "rzSlider", // for version 7.0.0
]