Topic: ERROR ReferenceError: Hammer is not defined (Help me)

Hector Alejandro Rodriguez free asked 5 years ago


I again here, I'm trying to install Universal Angular with mdbootstrap 6.2.2 and I have an error in the library hammer.js, I leave here the error that generates me
ERROR ReferenceError: Hammer is not defined
    at new MyHammerConfig (C:\Users\criacao\Documents\universal\mosaico\dist\server.js:1361:33)
    at _createClass (C:\Users\criacao\Documents\universal\mosaico\node_modules\@angular\core\bundles\core.umd.js:8438:24)
    at _createProviderInstance (C:\Users\criacao\Documents\universal\mosaico\node_modules\@angular\core\bundles\core.umd.js:8412:30)
    at resolveNgModuleDep (C:\Users\criacao\Documents\universal\mosaico\node_modules\@angular\core\bundles\core.umd.js:8375:25)
    at _callFactory (C:\Users\criacao\Documents\universal\mosaico\node_modules\@angular\core\bundles\core.umd.js:8467:36)
    at _createProviderInstance (C:\Users\criacao\Documents\universal\mosaico\node_modules\@angular\core\bundles\core.umd.js:8415:30)
    at resolveNgModuleDep (C:\Users\criacao\Documents\universal\mosaico\node_modules\@angular\core\bundles\core.umd.js:8375:25)
    at _createClass (C:\Users\criacao\Documents\universal\mosaico\node_modules\@angular\core\bundles\core.umd.js:8442:33)
    at _createProviderInstance (C:\Users\criacao\Documents\universal\mosaico\node_modules\@angular\core\bundles\core.umd.js:8412:30)
    at resolveNgModuleDep (C:\Users\criacao\Documents\universal\mosaico\node_modules\@angular\core\bundles\core.umd.js:8375:25)
Unhandled Promise rejection: Hammer is not defined ; Zone: <root> ; Task: Promise.then ; Value: ReferenceError: Hammer is not defined
    at new MyHammerConfig (C:\Users\criacao\Documents\universal\mosaico\dist\server.js:1361:33)

Here I leave the configuration of the webpack.config.sever.js, which is located in the root folder.
// Work around for https://github.com/angular/angular-cli/issues/7200

const path = require('path');

const webpack = require('webpack');

const nodeExternals = require('webpack-node-externals');

module.exports = {

  mode: 'none',

  entry: {

    // This is our Express server for Dynamic universal

    server: './server.ts',

    // This is an example of Static prerendering (generative)

  },

  target: 'node',

  resolve: { extensions: ['.ts', '.js'] },

  // Make sure we include all node_modules etc

  externals: [/node_modules/, nodeExternals({

    whitelist: [

        /^@agm\/core/,

        /^hammerjs/

      ]

  })],

  output: {

    // Puts the output at the root of the dist folder

    path: path.join(__dirname, 'dist'),

    filename: '[name].js'

  },

  module: {

    rules: [

      { test: /\.ts$/, loader: 'ts-loader' },

      {

        // Mark files inside `@angular/core` as using SystemJS style dynamic imports.

        // Removing this will cause deprecation warnings to appear.

        test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,

        parser: { system: true },

      },

    ]

  },

  plugins: [

    new webpack.ContextReplacementPlugin(

      // fixes WARNING Critical dependency: the request of a dependency is an expression

      /(.+)?angular(\\|\/)core(.+)?/,

      path.join(__dirname, 'src'), // location of your src

      {} // a map of your routes

    ),

    new webpack.ContextReplacementPlugin(

      // fixes WARNING Critical dependency: the request of a dependency is an expression

      /(.+)?express(\\|\/)(.+)?/,

      path.join(__dirname, 'src'),

      {}

    )

  ]

}

Arkadiusz Idzikowski staff answered 5 years ago


Dear Hector, Please follow these steps and let me know if that worked:
  1. Install types for hammer:
npm install @types/hammerjs --save-dev 2. Replace typeRoots with this types array in your tsconfig.json
"types": [

"hammerjs",

"jasmine",

"jasminewd2",

"node",

"q",

"selenium-webdriver"

]
3. Replace code in your app module with this code (change module names and import paths for mdb elements if you use free version):
import { BrowserModule } from '@angular/platform-browser';

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

import { MDBBootstrapModulesPro } from 'ng-uikit-pro-standard';

import { MDBSpinningPreloader } from 'ng-uikit-pro-standard';

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

import {HttpClientModule} from '@angular/common/http';

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

import { Hammer } from 'hammerjs/hammer';

export class MyHammerConfig extends HammerGestureConfig {

buildHammer(element:HTMLElement) {

constmc=newHammer(element, {

touchAction:'auto',

inputClass:Hammer.SUPPORT_POINTER_EVENTS?Hammer.PointerEventInput:Hammer.TouchInput,

recognizers: [

[Hammer.Swipe, {

direction:Hammer.DIRECTION_HORIZONTAL

}]

]

});

returnmc;

}

}

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule.withServerTransition({ appId:'serverApp' }),

BrowserAnimationsModule,

HttpClientModule,

MDBBootstrapModulesPro.forRoot(),

],

providers: [

MDBSpinningPreloader,

{

provide:HAMMER_GESTURE_CONFIG,

useClass:MyHammerConfig

}

],

bootstrap: [AppComponent],

schemas: [ NO_ERRORS_SCHEMA ]

})

export class AppModule { }
4. Add import 'hammerjs'; to your main.ts file
Regards,
Arek


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: desktop
  • Browser: Chrome
  • OS: Windows 7 64 bit
  • Provided sample code: No
  • Provided link: No