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

Question

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

我使用 Angular 9 和 Angular Material。自 ng9.

以来，material 不需要 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

Answer 1

这是模块（在我的例子中 "Carousle Module"）的示例。

在您的主模块 (app.module.ts) 导入中保留 HammerModule。

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 移动到延迟加载 COMPONENT 解决了这个问题。
HammerModule 和自定义配置的导入应保留在 app.module.ts.

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

How to lazy load HammerJS in Angular 9 project?

angular

lazy-loading

hammer.js