如何在 Angular 9 项目中延迟加载 HammerJS?
How to lazy load HammerJS in Angular 9 project?
我在我的 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
这是模块(在我的例子中 "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
.
我在我的 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
这是模块(在我的例子中 "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
.