slickness.not is not a function

[oriolpuig]

Hi @devmark,

I've been looking in all the issues if anyone could help me but I didn't find one to solve my problem. That's why I open a new one and apologize me if i'm wrong.

I've an angular aplication loaded with Grunt and using browserify to solve the dependencies and I've the require('angular-slick-carousel') at the top of the main angular app module and at the end I inject the 'slickCarousel' as a dependency injection.

First, I tried with something like this:

Main.js

var angular = require('angular');
require('angular-slick-carousel');

module.exports = angular.module('mainApp', [ 'slickCarousel' ])

But then, I've added the jquery and slick-carousel because I read that I should add those two, and I tried something like this: 

> Main.js
```javascript
var $ = require('jquery');
require('slick-carousel');
var angular = require('angular');
require('angular-slick-carousel');

module.exports = angular.module('mainApp', [
    'slickCarousel'
])

My component is using the same logic than your plunker's and It's not working fine.

Carousel.tpl.html

<slick class="slides" data="$ctrl.viewData" dots="true" ng-if="$ctrl.viewLoaded" settings="$ctrl.slickPanels">
<div ng-repeat="view in $ctrl.viewData">
<div class="slide slide-4">
<div>{{view.text}}</div>
</div>
</div>
</slick>

Carousel.component.js

'use strict';

module.exports = { template: require('./Carousel.tpl.html'), controller: CarouselController, bindings: { carouselId: '@', carouselConfig: '<', fireChangeSlide: '&onChangeSlide' } };

/ @ngInject / function CarouselController($timeout) { var ctrl = this;

ctrl.viewData = [{
    text: 'My View1',
    property: 0
}, {
    text: 'My View1',
    propety: 0
}, {
    text: 'My View1',
    property: 0
}];

ctrl.viewLoaded = true;

ctrl.updateView = function () {
    ctrl.viewLoaded = false;
    ctrl.viewData.push({
        text: 'My View' + ctrl.viewData.length
    });
    $timeout(function () {
        ctrl.viewLoaded = true;
    });
};

ctrl.slickPanels = {
    method: {},
    dots: false,
    infinite: false,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 1,
    autoPlay: false,
    adaptiveHeight: true,
    event: {
        beforeChange: function () {
            console.log('before change called');
        },
        afterChange: function () {
            console.log('after called');
        }
    }
};

}

What I'm doing wrong?
I think is something wrong in the **Main.js file** but I'm not sure what could be.

Thanks a lot for take a while answering me!!

[taro-0]

hi! @oriolpuig it seems like this might be caused because jQuery has not been loaded properly with angular.

[bkraszewski]

@oriolpuig I had same issue, this is what helped:

  window.$ = window.jQuery = require('jquery');

  var angular = require('angular');

  require('slick-carousel');
  require('slick-carousel/slick/ajax-loader.gif');
  require('slick-carousel/slick/slick.css');
  require('slick-carousel/slick/slick-theme.css');

  require('angular-slick-carousel');```

[oriolpuig]

Hi @bkraszewski and @t4r0,

Thanks for your comments. At the end, I added the jQuery and slick.js script references into intex.html and this will be packaged in the bundle.js with grunt.

    <!-- build:js({.tmp,.}) app.js -->
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/slick-carousel/slick/slick.min.js"></script>
    <script src="bundle.js"></script>
    <!-- endbuild -->

Best regards,

[taro-0]

Awesome @devmark I think you can close this issue

[frecklebit]

I've done all of this and I still get the error.

[taro-0]

@adamcolejenkins could you provide more information on how your project is set?

[heshamelmasry77]

nothing is working everyday i hare angular more and more