ngx-owl-旋转木马不工作的角7 web应用程序

Question

我已经安装了ngx-猫头鹰-旋转木马我的角web应用程序。

这些守则如下：

 <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文件：

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中，我也导入了这个模块

但是，如果我运行这个web应用程序，我会得到以下错误：

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)

我试着用谷歌来解决这个问题，但是我找不到正确的方法。

也许你能帮我。

诚挚的问候,

狮子座

Answer 1

它看起来像您正在使用的库，它从andSelf库调用jQuery方法。这一方法已被否决，以支持addBack。

我可以建议更新您的依赖项，以确保您使用的是最新的支持和兼容版本的库。

如果不起作用，你可以：

1. owl.carousel.min.js编辑源代码-转到文件并将所有andSelf替换为addBack。
2. Monkey修补程序jQuery --在jQuery对象上声明一个新函数，该函数将委托给现有的addBack方法。要做到这一点，您必须在尝试调用它之前创建函数。您可以在您的app.module.ts文件中执行此操作，或者在比owl更早解析的任何其他地方执行。 $.fn.andSelf =函数(){返回this.addBack.apply(此，参数)；}

后面的片段是在这个github问题中找到的，但应该已经解决了，因此我建议再次检查您的依赖项版本。