How to fix ERROR TypeError: Class constructor HammerGestureConfig cannot be invoked without 'new'

Question

我在添加 ngx-gallery 时遇到问题。检查时出现错误 错误类型错误：class 构造函数 HammerGestureConfig 在没有 'new'

的情况下无法调用

我已经在app.module中添加了hammerjs，但是还是有问题

这是我的app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { BsDropdownModule, TabsModule } from 'ngx-bootstrap';
import { RouterModule } from '@angular/router';
import { appRoutes } from './routes';
import { AuthGuard } from './_guards/auth.guard';
import { AuthService } from './_services/auth.service';
import { ErrorInterceptorProvider } from './_services/error.interceptor';
import { AlertifyService } from './_services/alertify.service';
import { UserService } from './_services/user.service';
import { JwtModule } from '@auth0/angular-jwt';
import { MemberDetailResolver } from './_resolvers/member-detail.resolver';
import { MemberListResolver } from './_resolvers/member-list.resolver';
import { NgxGalleryModule } from 'ngx-gallery';


import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { RegisterComponent } from './register/register.component';
import { MemberListComponent } from './members/member-list/member-list.component';
import { ListComponent } from './list/list.component';
import { MessagesComponent } from './messages/messages.component';
import { MemberCardComponent } from './members/member-card/member-card.component';
import { MemberDetailComponent } from './members/member-detail/member-detail.component';

export function tokeGetter() {
  return localStorage.getItem('token');
}

@NgModule({
  declarations: [
    AppComponent,
    NavComponent,
    DashboardComponent,
    RegisterComponent,
    MemberListComponent,
    ListComponent,
    MessagesComponent,
    MemberCardComponent,
    MemberDetailComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    BsDropdownModule.forRoot(),
    TabsModule.forRoot(),
    RouterModule.forRoot(appRoutes),
    NgxGalleryModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: tokeGetter,
        whitelistedDomains: ['192.168.100.6:5000'],
        blacklistedRoutes: ['192.168.100.6:5000/api/auth']
      }
    })
  ],
  providers: [
    AuthService,
    ErrorInterceptorProvider,
    AlertifyService,
    AuthGuard,
    UserService,
    MemberDetailResolver,
    MemberListResolver
  ],

  bootstrap: [AppComponent]
})
export class AppModule { }

我想在每个用户中显示照片，但是因为错误不能显示

Answer 1

您可以转到 tsconfig.json 文件并将您的目标更改为 es5 (ECMAScript 5) 像这样：

  {
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"]
  }
}

归功于：https://github.com/lukasz-galka/ngx-gallery/issues/242#issuecomment-483223817

或推荐方式：如果你不想改变目标，可以使用这种方式：

前往 node_modules => ngx-gallery => 捆绑包 => ngx-gallery。umd.js

改变这个：

var CustomHammerConfig = /** @class */ (function (_super) {
__extends(CustomHammerConfig, _super);
function CustomHammerConfig() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.overrides = ({
        'pinch': { enable: false },
        'rotate': { enable: false }
    });
    return _this;
}
return CustomHammerConfig;
}(platformBrowser.HammerGestureConfig));

到

 class CustomHammerConfig extends platformBrowser.HammerGestureConfig {
    constructor() {
        super(...arguments);
        this.overrides = ({
            'pinch': { enable: false },
            'rotate': { enable: false }
        });
    }
}

https://github.com/lukasz-galka/ngx-gallery/issues/242#issuecomment-502917803

Answer 2

您只需打开 package.json 并更改 "ngx-gallery": "git://github.com/onack/ngx-gallery-dist" 代替 "ngx-gallery": "^5.10.0" 您会在 dependencies

中找到它们

Answer 3

有更好的方法来解决这个问题。

将您的 app.module.ts 中的提供商修改为

export class CustomHammerConfig extends HammerGestureConfig  {
   overrides = {
       pinch: { enable: false },
       rotate: { enable: false }
   };
}

并添加到提供商

providers: [
    {
        provide: HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig 
    }
]

Answer 4

使用 npm install @kolkov/ngx-gallery 而不是 npm install ngx-gallery 并从 app.module.

中的@kolkov/ngx-gallery 导入

Answer 5

最近我得知我们可以使用新版本的 Ngx-Gallery 来解决这个问题。我刚卸载 ngx-gallery :

npm uninstall  ngx-gallery

然后我安装了angular支持的版本 9:

npm install ngx-gallery-9 --save

之后，我只是从 app.module.ts 中删除了旧引用并将其更改为新格式：

// import {NgxGalleryModule} from 'ngx-gallery'; // remove this line
import {NgxGalleryModule} from 'ngx-gallery-9';

或者，如果您坚持使用旧版本，那么更改其他人提到的 tsconfig.ts 并不是一个好主意（因为您想使用新功能）。您可以轻松地将打击代码添加到您的 app.module.ts，您将看到变化：

export class CustomHammerConfig extends HammerGestureConfig  {
   overrides = {
       pinch: { enable: false },
       rotate: { enable: false }
   };
}

并且在提供商中只需添加：

providers: [
{ provide: HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig }
]

How to fix ERROR TypeError: Class constructor HammerGestureConfig cannot be invoked without 'new'

How to fix ERROR TypeError: Class constructor HammerGestureConfig cannot be invoked without 'new'

hammer.js

typescript

angular