Блог

Главная - Вопросы по программированию - ngx-owl-карусель не работает в веб-приложении angular 7

ngx-owl-карусель не работает в веб-приложении angular 7

#angular #carousel

#angular #карусель

Вопрос:

Я установил ngx-owl-carousel для своего веб-приложения angular.

коды следующие: 

  <owl-carousel [options]="{items: 3, dots: false, navigation: false}" [items]="images" [carouselClasses]="['owl-theme', 'row', 'sliding']">
        <div class="item" *ngFor="let image of images;let i = index">
          <div class="thumbnail-image"><img [src]="image" /></div>
        </div>
      </owl-carousel>

и файл in ts: 

 export class LandingPageComponent implements OnInit {
  images: Array<any> = [];
  defaultOptions: any = {};

  constructor(private router: Router) {
    this.images = [
      'app/components/landing-page/images/partner_cac.png',
      'app/components/landing-page/images/partner_cac.png',
      'app/components/landing-page/images/partner_cac.png'
    ];
  }
  ngOnInit() {

  }

и в файле angular.json

  "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/owl.carousel/dist/owl.carousel.min.js",
  
 "styles": [
              "node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/app/styles/base.scss",
              "node_modules/owl.carousel/dist/assets/owl.carousel.min.css",
              "node_modules/owl.carousel/dist/assets/owl.theme.default.min.css"
            ],
            "scripts": [

и в app.module.ts я также импортировал этот модуль

но если я запускаю это веб-приложение; Я получаю эту ошибку: 

 OwlCarousel.html:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 3, nodeDef: {…}, elDef: {…}, elView: {…}}component: (...)componentRenderElement: (...)context: (...)elDef: {nodeIndex: 1, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, …}elOrCompView: (...)elView: {def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: OwlCarousel, …}injector: (...)nodeDef: {nodeIndex: 3, parent: {…}, renderParent: {…}, bindingIndex: 2, outputIndex: 0, …}nodeIndex: 3providerTokens: (...)references: (...)renderNode: (...)view: {def: {…}, parent: {…}, viewContainerParent: null, parentNodeDef: {…}, context: OwlCarousel, …}__proto__: Object
View_OwlCarousel_0 @ OwlCarousel.html:1
proxyClass @ compiler.js:18239
push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:24139
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15777
(anonymous) @ core.js:18126
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:17258
push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:18126
(anonymous) @ core.js:18010
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.js:17299
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:17213
next @ core.js:18010
schedulerFn @ core.js:13515
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:194
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:132
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:13499
checkStable @ core.js:17268
onHasTask @ core.js:17312
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:443
push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:463
push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:291
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:212
drainMicroTaskQueue @ zone.js:601
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:502
invokeTask @ zone.js:1744
globalZoneAwareCallback @ zone.js:1781
load (async)
customScheduleGlobal @ zone.js:1883
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleEventTask @ zone.js:264
(anonymous) @ zone.js:2054
desc.set @ zone.js:1393
push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.ResourceLoaderImpl.get @ platform-browser-dynamic.js:334
push../node_modules/@angular/compiler/fesm5/compiler.js.DirectiveNormalizer._fetch @ compiler.js:16173
(anonymous) @ compiler.js:16295
push../node_modules/@angular/compiler/fesm5/compiler.js.DirectiveNormalizer._loadMissingExternalStylesheets @ compiler.js:16295
push../node_modules/@angular/compiler/fesm5/compiler.js.DirectiveNormalizer._normalizeTemplateMetadata @ compiler.js:16243
(anonymous) @ compiler.js:16200
then @ compiler.js:2421
push../node_modules/@angular/compiler/fesm5/compiler.js.DirectiveNormalizer.normalizeTemplate @ compiler.js:16200
push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver.loadDirectiveMetadata @ compiler.js:18392
(anonymous) @ compiler.js:26036
(anonymous) @ compiler.js:26035
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._loadModules @ compiler.js:26032
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents @ compiler.js:26010
push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync @ compiler.js:25970
push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:143
compileNgModuleFactory__PRE_R3__ @ core.js:17619
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:17802
./src/main.ts @ main.ts:19
__webpack_require__ @ bootstrap:78
0 @ main.ts:20
__webpack_require__ @ bootstrap:78
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
Show 3 more frames
core.js:15724 ERROR TypeError: a(...).find(...).andSelf is not a function
    at c.<anonymous> (owl.carousel.min.js:2)
    at HTMLElement.i (jquery.min.js:2)
    at HTMLElement.dispatch (jquery.min.js:2)
    at HTMLElement.y.handle (jquery.min.js:2)
    at Object.trigger (jquery.min.js:2)
    at HTMLElement.<anonymous> (jquery.min.js:2)
    at Function.each (jquery.min.js:2)
    at w.fn.init.each (jquery.min.js:2)
    at w.fn.init.trigger (jquery.min.js:2)
    at e.push../src/app/components/landing-page/js/owl.carousel.min.js.e.trigger (owl.carousel.min.js:1)

Я пытаюсь в Google решить эту проблему, но не могу найти правильный способ.

может быть, вы сможете мне помочь.

С наилучшими пожеланиями,

Leo

Комментарии:

1. Пожалуйста, опубликуйте stackblitz.com ссылка

Ответ №1:

Это похоже на библиотеку, которую вы используете, вызывая andSelf метод из библиотеки jQuery. Этот метод устарел в пользу addBack .

Я могу предложить обновить ваши зависимости, чтобы убедиться, что вы используете последние поддерживаемые и совместимые версии библиотек.

Если это не сработает, вы могли бы:

  1. Отредактируйте исходный код — перейдите к owl.carousel.min.js подайте файл и замените все andSelf на addBack .

  2. Обезьянье исправление jQuery — объявите новую функцию в вашем объекте jQuery, которая делегировала бы существующий addBack метод. Для этого вы должны создать функцию до того, как owl-carousel попытается ее вызвать. Вы можете выполнить это в своем app.module.ts файле или в любом другом месте, которое будет проанализировано раньше, чем owl-carousel.

     $.fn.andSelf = function() {
  return this.addBack.apply(this, arguments);
}

Более поздний фрагмент был найден в этой проблеме с github, но, как предполагается, был решен, поэтому я предлагаю дважды проверить версии ваших зависимостей.