如何在角9工程中延迟加载HammerJS？

Question

在我的角度项目中，我使用HammerJS来做一些手势，比如懒散加载组件中的panleft和panrigth。当我构建应用程序时，延迟加载组件位于单独的包中，而hammer.js则停留在主包中的node_modules中。它的工作就像预期的那样。但是如何在单独的延迟模块中加载hammer.js以减少主包的大小？

我用角9和角质材料。HammerJS是不需要的材料，因为ng9。

要安装HammerJS (它与ng9一起工作) I：

运行npm install --save hammerjs

• add到main.ts - import 'hammerjs'

• import 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移动到惰性加载模块
3. 移动<代码>D30使用自定义配置到延迟加载模块H 231H 1321+2H 233H 1341+3H 235G 236

Answer 1

将import 'hammerjs'从main.ts迁移到惰性加载组件解决了这个问题。

导入HammerModule和自定义配置应该保留在app.module.ts中。

Answer 2

下面是一个模块的示例(在我的例子中是"Carousle“)。

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

在捆绑分析中，您可能会看到锤子是特性块(模块)的一部分，而不是主模块。

​

​