如何在 Angular 9 项目中延迟加载 HammerJS？答案

【问题标题】：How to lazy load HammerJS in Angular 9 project?如何在 Angular 9 项目中延迟加载 HammerJS？
【发布时间】：2020-03-05 15:17:43
【问题描述】：

我在我的 Angular 项目中使用 HammerJS 来处理一些手势，例如延迟加载组件中的 panleft 和 panrigth。当我构建应用程序时，延迟加载组件位于单独的包中，但 hammer.js 留在主包中的 node_modules 中。它按预期工作。但是如何在单独的惰性模块中加载hammer.js 以减少主包大小？

我使用 Angular 9 和 Angular 材质。从 ng9 开始，材料不需要 HammerJS。

要安装 HammerJS（它适用于 ng9）我：
1.运行npm install --save hammerjs
2. 添加到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

【问题讨论】：

只是为了确定，你想让 HammerJS 作为一个延迟加载模块的一部分吗？
@Vojtech 是的，对

标签： angular lazy-loading hammer.js

【解决方案1】：

这是模块（在我的例子中是“轮播模块”）的外观示例。

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

在捆绑分析中，您可能会看到锤子是功能块（模块）的一部分，而不是主模块。

【讨论】：

感谢您的回答，但在这种情况下，手势在组件中不起作用（
调整答案不让任何人感到困惑

【解决方案2】：

将 import 'hammerjs' 从 main.ts 移动到延迟加载 COMPONENT 可解决此问题。
HammerModule 的导入和自定义配置应保留在 app.module.ts 中。

【讨论】：