Как лениво загрузить Hammer JS в Angular 9 проекте?

Question

Я использую Hammer JS в своем проекте Angular для нескольких жестов, таких как panleft и panrigth в компоненте отложенной загрузки. Когда я создаю приложение, компонент отложенной загрузки находится в отдельном пакете, но hammer.js остается в node_modules в основном комплекте. И все работает как положено. Но как загрузить hammer.js в отдельный ленивый модуль, чтобы уменьшить размер основного пакета?

Я использую Angular 9 с Angular Материал. Молоток JS для материала не требуется, поскольку ng9.

Для установки молотка JS (и он работает с ng9) I:
1. run npm install --save hammerjs
2. add to main.ts - import 'hammerjs'
3. импорт HammerModule в app.module.ts (требуется для ng9)
также у меня есть пользовательская конфигурация в app.module.ts:

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

, которая обеспечивает как { provide: HAMMER_GESTURE_CONFIG, useClass: HammerCustomConfig }

Я пытался, и это НЕ РАБОТАЕТ:
1. переместить import 'hammerjs' в модуль отложенной загрузки (но hammer.js перенесено в связку из модуля отложенной загрузки)
2. переместить HammerModule в модуль отложенной загрузки
2. переместите HammerModule с пользовательской конфигурацией в модуль отложенной загрузки
4. 1 + 2
5. 1 + 3

Answer 1

Вот пример того, как выглядит модуль (в моем случае «Carousle Module»).

Оставьте HammerModule в вашем основном модуле (app.module.ts) импорта.

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 {}

---

При групповом анализе вы можете видеть, что молоток является частью функционального блока (модуля), а не основного модуля.

Answer 2

Перемещение import 'hammerjs' из main.ts в режим отложенной загрузки КОМПОНЕНТ решит эту проблему.
Импорт HammerModule и пользовательская конфигурация должны остаться в app.module.ts.