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

How to lazy load HammerJS in Angular 9 project?

我在我的 Angular 项目中使用 HammerJS 来实现延迟加载组件中的一些手势,例如 panleftpanrigth。当我构建应用程序时,延迟加载组件位于单独的包中,但 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.导入HammerModuleapp.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

这是模块(在我的例子中 "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 {}


在包分析中,您可能会看到锤子是功能块(模块)的一部分,而不是主模块。

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