devmark / angular-slick-carousel

Angular directive for slick-carousel
http://devmark.github.io/angular-slick-carousel/
MIT License
353 stars 125 forks source link

TypeError: slickness.slick is not a function [CommonJS - Browserify] #93

Closed mariogmz closed 5 years ago

mariogmz commented 8 years ago

Hello, I'm trying to include this amazing carousel into my angular application, I'm using common JS along with browserify to make this happen.

I'm getting TypeError: slickness.slick is not a function error on my application, I'm using gulp with browserify to include my dependencies using npm so I'm not really sure how to make this work, I know jquery must be included before slick and then, after those two angular-slick-carousel should be included, but I'm using common js modules for everything.

This is a slice of my code:

app.js (application entry point)

'use strict';

var amnessia = require('angular').module('amnessia', [
  'amnessia.core',
  'amnessia.header',
  'amnessia.layout',
  'amnessia.home',
  'amnessia.brand',
  'amnessia.location'
]);

require('./core');
require('./header');
require('./layout');
require('./home');
require('./brand');
require('./location');

app/core/index.js

'use strict';

require('../blocks');
require('angular-ui-router');
require('angular-local-storage');
require('angular-simple-logger');
require('angular-google-maps');
require('angular-scroll');
require('angular-slick-carousel');

var amnessia = require('angular').module('amnessia.core', [
  'ui.router',
  'LocalStorageModule',
  'uiGmapgoogle-maps',
  'duScroll',
  'slickCarousel'
]).value('duScrollOffset', 162);

amnessia.config( require('./config') );

app/blocks/index.js

'use strict';

window._ = require('lodash');
window.$ = require('jquery');
window.slick = require('slick-carousel'); // I don't know how to make slick work, I tried the same as with underscore and jquery

var amnessia = require('angular').module('blocks', []);
monove commented 8 years ago

This issue is solved for me by including jQuery before Angular

mariogomez-gpsw commented 8 years ago

@monove can you please elaborate on how you achieved that? Code examples?

monove commented 8 years ago
<script src="../bower_components/jquery/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/slick-carousel/slick/slick.js"></script>
<script src="../bower_components/angular-slick-carousel/dist/angular-slick.min.js"></script>
mariogomez-gpsw commented 8 years ago

@monove I see, I ended up doing the same, I would liked to have slick included the common js way.

EricHerlitz commented 8 years ago

I am loading like that and still get the error

<script src="/Scripts/jquery-2.2.4.js"></script>
<script src="/javascripts/bootstrap.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/slick.js"></script>
<script src="/Scripts/angular-slick.js"></script>

Really impressed...

dan-leech commented 7 years ago
<script src="/Scripts/slick.js"></script>
<script src="/Scripts/angular.js"></script>

is correct