CODEWITHSUNDEEP
angularhammer.js
J.F.
J.F.

Reputation: 185

Dependency on 'hammerjs'. CommonJS or AMD dependencies can cause optimization bailouts

I am working on an angular application with Angular CLI 11.0.2 and I am using hammerJS in my application to handle the swipe events.

When I compile the application, I have the following warning message:

Warning: F:\Programs\GoodRiddles\git\angular\src\app\config\hammerjs.config.ts depends on 'hammerjs'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

From what I could understand here, I should replace hammerJS by an ECMA version of the library.

My question is: Is there a proper way (without simply hiding the message) to fix it? Do I need to use another library instead?

If it can help, this is how I use it:

import { Injectable } from '@angular/core';
import { HammerGestureConfig } from "@angular/platform-browser";
import * as hammer from "hammerjs";

@Injectable()
export class HammerConfig extends HammerGestureConfig {
    overrides = <any>{
        swipe: { direction: hammer.DIRECTION_HORIZONTAL },
        pinch: { enable: false },
        rotate: { enable: false }
    };
}

Upvotes: 7

Views: 3893

Answers (2)

Yennefer
Yennefer

Reputation: 6234

Apparently, it seems you can import hammer.js from platform browser in this way:

import { HammerModule} from '@angular/platform-browser';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    HammerModule,
  ])

Note: as I am currently porting the application, I ignore if it works as expected.

Upvotes: 0

Tarek Elmadady
Tarek Elmadady

Reputation: 346

Add Hammerjs to allowedCommonJsDependencies in your angular.json

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "allowedCommonJsDependencies": [
          "hammerjs" <== here
        ],...

Upvotes: 7

Related Questions