Używam HammerJS w moim projekcie Angular do kilku gestów, takich jak panleft i panrigth w komponencie z leniwym ładowaniem. Kiedy tworzę aplikację, komponent leniwego ładowania jest w osobnym pakiecie, ale hammer.js pozostaje w node_modules w głównym pakiecie. I działa zgodnie z oczekiwaniami. Ale jak załadować hammer.js w oddzielnym leniwym module, aby zmniejszyć rozmiar głównego pakietu?

Używam Angular 9 z Angular Material. HammerJS nie jest wymagany dla materiału od ng9.

Aby zainstalować HammerJS (i działa z ng9) I:
1. uruchom npm install --save hammerjs
2. dodaj do main.ts - import 'hammerjs'
3. importuj HammerModule do app.module.ts (wymagane dla ng9)
mam też niestandardową konfigurację w app.module.ts:

@Injectable()
export class HammerCustomConfig extends HammerGestureConfig {
  overrides = { 'pinch': { enable: false }, 'rotate': { enable: false } } as any;
}

Który podał jak { provide: HAMMER_GESTURE_CONFIG, useClass: HammerCustomConfig }

Próbowałem i NIE DZIAŁA:
1. przenieś import 'hammerjs' do leniwego modułu ładowania (ale hammer.js zastąpiono go pakietem leniwego modułu ładowania)
2. przenieś HammerModule do modułu leniwego ładowania
2. przenieś HammerModule z niestandardową konfiguracją do modułu z opóźnionym ładowaniem
4. 1 + 2
5. 1 + 3

3
Andriy Zozulya 5 marzec 2020, 18:17

2 odpowiedzi

Najlepsza odpowiedź

Przeniesienie import 'hammerjs' z main.ts do leniwego ładowania COMPONENT rozwiązuje ten problem.
Import HammerModule i konfiguracja niestandardowa powinny pozostać w app.module.ts.

2
Andriy Zozulya 10 marzec 2020, 13:51

Oto przykład, jak wygląda moduł (w moim przypadku „Carousel Module”).

Pozostaw HammerModule w głównym module (app.module.ts) importu.

import { HAMMER_GESTURE_CONFIG, HammerModule } from '@angular/platform-browser';
import { CustomHammerConfig } from './hammer-config';


import 'hammerjs'; // <-- import it here (not in your main.ts)

@NgModule({
  imports: [
    CommonModule,
    HammerModule, // <-- put it only here (not in your AppModule)
  ],
  exports: [CarouselComponent],
  providers: [
    // config may be provided in module where needed or in app.module
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: CustomHammerConfig,
    },
  ],
  declarations: [CarouselComponent],
})
export class CarouselModule {}


W analizie pakietów możesz zauważyć, że młotek jest częścią fragmentu funkcji (modułu), a nie modułu głównego.

build analysis

4
Vojtech 26 marzec 2020, 18:19